iT邦幫忙

0

BOOTSTRAP modal 進站後自動彈出

  • 分享至 

  • xImage

BOOTSTRAP modal 進站後自動彈出如何實現?
求解
版本 4.4.1

(兩天內3次發問XD

document ready
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

5
listennn08
iT邦高手 5 級 ‧ 2020-07-28 11:22:43
最佳解答

就這樣

$(window).ready(() => {
	$('#myModal').modal('show');
})

codepen

QR摳 iT邦新手 5 級 ‧ 2020-07-28 12:11:20 檢舉

沒效果...

不知道你 html 長怎樣
以下範例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><!-- 載入 bootstrap css -->
  </head>
  <body>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <!-- 載入 JQuery -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <!-- 載入 bootstrap 使用的 js -->
    <script>
      $(window).ready(() => {
        $('#myModal').modal('show');
      })
    </script>
  </body>
</html>

使用者互動效果要載入 jQuery 與 bootstrap 的 js
沒有用 tooltip 可以不用 popper.js
bootstrap 5 會拿掉 jQuery 所以知道怎麼用就好
至於你是用 bootstrap 4.4.1
js 改成引入

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

即可

QR摳 iT邦新手 5 級 ‧ 2020-07-28 15:15:40 檢舉

用載入外部檔案都可以(該不會是因為忘記載入jQuery XD

4

初學者不用擔心太多次發問。
只要問對了就行。
問錯了也沒關係,最多就是被飆而已。
重點在於能得到你要的知識就值了。

基本上來說, listennn08 給你的程式碼就可以達到你要的效果。
至於你說沒效果的因素非常的多。
單只回沒效果,沒人會知道你發生什麼問題。

看是否有回應任何錯誤訊息。你的程式碼或html碼為何也要讓人知道。
這邊你先照抄 listennn08 給你的範例,再從中去修改成你的東西就行。

基本知識不夠,就得從抄東西內去學習。不要只是會「抄」

看更多先前的回應...收起先前的回應...
QR摳 iT邦新手 5 級 ‧ 2020-07-28 15:16:31 檢舉

又沒有XD

我沒有說你「有」。只是先告訴你一些思維跟做法。
你「有」的話,早就開飆了。也不會告訴你這些。

QR摳 iT邦新手 5 級 ‧ 2020-07-28 15:25:32 檢舉

YOUTUBE,網網路文章自學

ok,了

QR摳 iT邦新手 5 級 ‧ 2020-07-28 15:38:53 檢舉

抱歉,剛才口氣不是很好

我要發表回答

立即登入回答