BOOTSTRAP modal 進站後自動彈出

bootstrap 4.4.1 modal popout auto

QR摳 2020-07-28 11:13:51 ‧ 5712 瀏覽

分享至

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

(兩天內3次發問XD

leonliu777 iT邦新手 5 級 ‧ 2020-07-28 11:22:57 檢舉

document ready

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

listennn08

iT邦高手 5 級 ‧ 2020-07-28 11:22:43

最佳解答

就這樣

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

codepen

回應 3
分享
檢舉

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

沒效果...

listennn08 iT邦高手 5 級 ‧ 2020-07-28 12:56:44 檢舉

不知道你 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>

即可

不知道你 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" />
  </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> 
    <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> 
    <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

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2020-07-28 13:11:38

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

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

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

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

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

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

又沒有XD

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2020-07-28 15:17:58 檢舉

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

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

YOUTUBE,網網路文章自學

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2020-07-28 15:28:51 檢舉

ok，了

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

抱歉，剛才口氣不是很好

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙