在页面加载上启动引导模式

这里有一个解决方案[没有javascript初始化!］

我找不到一个例子，没有初始化你的模式与javascript， $('#myModal').modal('show')，所以这里有一个建议，你可以实现它没有javascript延迟页面加载。

用类和样式编辑你的modal容器div:

Edit your body with class and style: <body class="modal-open" style="padding-right:17px;"> Add modal-backdrop div <div class="modal-backdrop in"></div> Add script $(document).ready(function() { $('body').css('padding-right', '0px'); $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); $('#MyModal').modal('show'); }); What will happen is that the html for your modal will be loaded on page load without any javascript, (no delay). At this point you can't close the modal, so that is why we have the document.ready script, to load the modal properly when everything is loaded. We will actually remove the custom code and then initialize the modal, (again), with the .modal('show').

2016-10-23 12:32:04

更新2021

引导5

现在Bootstrap不再需要jQuery，使用JavaScript显示模态很容易。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
myModal.toggle()

Demo

引导4

Bootstrap 4的模式标记略有变化。下面是如何在页面加载时打开模态，并可选地延迟显示模态…

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds
    
    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <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 mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

Demo

2018-07-09 12:09:12

这里有一个解决方案[没有javascript初始化!］

我找不到一个例子，没有初始化你的模式与javascript， $('#myModal').modal('show')，所以这里有一个建议，你可以实现它没有javascript延迟页面加载。

用类和样式编辑你的modal容器div:

Edit your body with class and style: <body class="modal-open" style="padding-right:17px;"> Add modal-backdrop div <div class="modal-backdrop in"></div> Add script $(document).ready(function() { $('body').css('padding-right', '0px'); $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); $('#MyModal').modal('show'); }); What will happen is that the html for your modal will be loaded on page load without any javascript, (no delay). At this point you can't close the modal, so that is why we have the document.ready script, to load the modal properly when everything is loaded. We will actually remove the custom code and then initialize the modal, (again), with the .modal('show').

2016-10-23 12:32:04

只需添加下面的-

class="modal show"

工作示例,

2014-07-19 07:32:33

您可以尝试这个可运行的代码-

$(window).load(function() { $('#myModal').modal('show'); }); <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container">  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>

更多信息可以在这里找到。

我想你已经有了完整的答案。

2016-04-28 06:20:07

你可以使用jQuery来处理这个问题

首先在模板上导入

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

然后用jQuery脚本在你的模式上点击id

<script type="text/javascript">
      $(window).on('load', function() {
        $('#staticBackdrop').modal('show');
    });
</script>

这里是modal用于case显示的django消息

{% if messages %}
      {% for message in messages %}
      <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="false">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="staticBackdropLabel">Message</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              {{ message }}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
        
    {% endif %}

2022-01-06 05:02:23

在页面加载上启动引导模式

推荐文章

最新文章

标签