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

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

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

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

当前回答

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

即使没有Javascript，你也可以在开始时显示它。只需删除类“hide”。

class="Modal"

2013-03-05 17:12:57

其他回答

关于安德烈的伊里奇说你必须补充 js脚本在你称之为jquery的行之后:

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>

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

对我来说，这就是问题所在，希望能有所帮助

2014-07-22 13:50:06

在我的例子中，添加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来显示模态

最简单的方法是将"hide"替换为"in"

class="modal fade hide"

class="modal fade in"

你需要添加onclick = "$('.modal').hide()"按钮关闭;

PS:我认为最好的方法是添加jQuery脚本:

$('.modal').modal('show');

2013-07-03 09:39:37

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

在bootstrap 3中，你只需要通过js初始化模态，如果在页面加载的时刻，模态标记在页面中，模态就会显示出来。

如果你想防止这种情况，可以在初始化模态的地方使用show: false选项。就像这样: $ (' .modal ')。Modal ({show: false})

2014-09-12 14:22:37

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

推荐文章

最新文章

标签