在引导模式打开时调用函数

本文介绍了在引导模式打开时调用函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我曾经使用过 JQuery UI 的对话框，它有 open 选项，您可以在其中指定一些 Javascript 代码以在打开对话框后执行.我会使用该选项使用我拥有的功能在对话框中选择文本.

现在我想使用引导程序的模态来做到这一点.以下是 HTML 代码:

<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3>模态头</h3>

<div class="modal-body"><预>打印你好世界"

至于打开模态的按钮:

显示代码

我尝试使用按钮的 onclick 侦听器，但是警报消息在 模式出现之前显示:

$( ".code-dialog" ).click(function(){alert("我希望在模态打开后出现这个！");});

解决方案

您可以使用 显示事件/根据您的需要显示事件:

$( "#code" ).on('shown', function(){alert("我希望在模态打开后出现这个！");});

演示:Plunker

Bootstrap 3.0 更新

对于 Bootstrap 3.0，您仍然可以使用显示的事件，但您可以像这样使用它:

$('#code').on('shown.bs.modal', function (e) {//做点什么...})

在事件"下查看 Bootstrap 3.0 文档.

I used to use JQuery UI's dialog, and it had the open option, where you can specify some Javascript code to execute once the dialog is opened. I would have used that option to select the text within the dialog using a function I have.

Now I want to do that using bootstrap's modal. Below is the HTMl code:

<div id="code" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Modal header</h3> </div> <div class="modal-body"> <pre> print 'Hello World'

And as for the button that opens the modal:

<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

I tried to use an onclick listener of the button, but the alert message was displayed before the modal appeared:

$( ".code-dialog" ).click(function(){ alert("I want this to appear after the modal has opened!"); });

解决方案

You can use the shown event/show event based on what you need:

$( "#code" ).on('shown', function(){ alert("I want this to appear after the modal has opened!"); });

Demo: Plunker

Update for Bootstrap 3.0

For Bootstrap 3.0 you can still use the shown event but you would use it like this:

$('#code').on('shown.bs.modal', function (e) { // do something... })

See the Bootstrap 3.0 docs here under "Events".