我根本不懂JavaScript。Bootstrap文档说到

通过JavaScript调用modal: $('#myModal').modal(options)

我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。


当前回答

除了user2545728和Reft的答案,没有javascript,但与情态背景

添加3件事

一个在.modal类之前带有modal- background类的div Style ="display:block;"到.modal类 与.modal类一起淡出

例子

<div class="modal-backdrop in"></div>

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="channelModal">Welcome!</h4>

            </div>

            <div class="modal-body" style="height:350px;">

                How did you find us?

            </div>

        </div>

    </div>

</div>

其他回答

为了避免引导被否决并失去它的功能,只需创建一个常规的启动按钮,为它提供一个Id,然后使用jquery“点击它”,如下所示: 启动按钮:

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
  See what´s new!
</button>

jQuery触发器:

$(document).ready(function () {
  $('#btnAnouncement').click();
)}

希望能有所帮助。干杯!

你可以使用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 %}

使用Bootstrap 3和jQuery(2.2和2.3)进行测试

$(window).on('load',function(){
  $('#myModal').modal('show');
});



<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><i class="fa fa-exclamation-circle"></i>&nbsp; //Your modal Title</h4>
        </div>
        <div class="modal-body">
          //Your modal Content
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>

    </div>
</div>

https://jsfiddle.net/d7utnsbm/

我最近需要使用Django消息启动一个Bootstrap 5模态,不使用jQuery,也不使用按钮点击(例如,页面加载)。我是这样做的:

/ HTML模板

<div class="modal" id="notification">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Notification!</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% for m in messages %}
          {{ m }}
        {% endfor %}
      </div>
      <div class="modal-footer justify-content-between">
        <a class="float-none btn btn-secondary" href="{% url 'some_view' %}"
           type="button">
          Link/Button A
        </a>
        <button type="button" class="btn btn-primary"
                data-bs-dismiss="modal">
          Link/Button B
        </button>
      </div>
    </div>
  </div>
</div>

JS文件或模板

{% block javascript %}
  {{ block.super }}
  <script>
    var test_modal = new bootstrap.Modal(
      document.getElementById('notification')
    )
    test_modal.show()
  </script>
{% endblock javascript %}

这个方法在没有Django模板的情况下也可以工作;只需使用HTML并将JS放在一个文件或脚本元素中,在Bootstrap JS结束之前加载body元素。

只需将你想要在页面加载时调用的模态包装在文档头部的jQuery load事件中,它就会弹出,如下所示:

JS

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

HTML

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

你仍然可以在你的页面中调用模态,通过这样的链接调用它:

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>