Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
284 views
in Technique[技术] by (71.8m points)

javascript - 在页面加载时启动Bootstrap Modal(Launch Bootstrap Modal on page load)

I don't know javascript at all.(我一点都不懂javascript。)

The bootstrap documentation says to(引导文档说)

Call the modal via javascript: $('#myModal').modal(options)(通过javascript调用模式:$('#myModal')。modal(options))

I have no clue how to call this on a page load.(我不知道如何在页面加载时调用它。)

Using the supplied code on the bootstrap page I can successfully call the Modal on an element click, but I want it to load immediately on a page load.(使用引导页面上提供的代码,我可以在元素单击时成功调用Modal,但是我希望它在页面加载时立即加载。)   ask by Brandon translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Just wrap the modal you want to call on page load inside a jQuery load event on the head section of your document and it should popup, like so:(只需将要在页面加载时调用的模式包装在文档头部的jQuery load事件中,它就会弹出,如下所示:)

JS(JS)

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

HTML(的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>

You can still call the modal within your page with by calling it with a link like so:(您仍然可以通过以下链接来调用页面中的模式,即:)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...