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

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

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

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

当前回答

在我的例子中，添加jQuery来显示模态不起作用:

$(document).ready(function() {
    $('#myModal').modal('show');
});

这似乎是因为模态有属性aria-hidden="true":

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

需要删除该属性以及上面的jQuery:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

请注意，我尝试将模态类从模态渐变更改为模态渐变，但这并不奏效。此外，将模态淡出类更改为模态显示类也阻止了模态关闭。

2015-02-11 22:12:26

其他回答

您可以通过数据属性激活模态，而不需要编写任何JavaScript。

选项"show"设为true显示初始化时的模态:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

2017-09-21 18:48:16

我最近需要使用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元素。

2021-01-04 21:17:02

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

这里有一个解决方案[没有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

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

<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>

2012-04-19 18:52:06

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

推荐文章

最新文章

标签