twitter-bootstrap 通过 jquery 触发引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28250009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
trigger bootstrap modal via jquery
提问by misha312
got a problem. I am trying to trigger bootstrap modal via jquery and it doesnt work. I tried every way: way no1:
有问题。我正在尝试通过 jquery 触发引导模式，但它不起作用。我尝试了各种方式：方式 no1：
$(document).ready(function(){
$('#btn').click(function(){
$('#server_msg_modal').modal('show');
});
});
way no2:
方式二：
$(document).ready(function(){
$('#btn').click(function(){
$('#server_msg_modal').modal('show');
});
});
way no3:
方式三：
$('#server_msg_modal').modal({
show: 'true'
});
nothing is working... please help me.
没有任何效果...请帮助我。
回答by ckuijjer
Your jQuery function to add the click handler to the button, and to open the modal window should both work. See the example below. I can only suggest you to take a look at for example Chrome's DevTools to see if you have any JavaScript errors in its console.
用于将单击处理程序添加到按钮和打开模式窗口的 jQuery 函数应该都可以工作。请参阅下面的示例。我只能建议您查看例如 Chrome 的 DevTools 以查看其控制台中是否有任何 JavaScript 错误。
$(document).ready(function(){
$('#btn').click(function(){
$('#server_msg_modal').modal('show');
});
});<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="btn btn-danger" href="#server_msg_modal" data-toggle="modal">using data attribute</div>
<div class="btn btn-danger" id="btn">using jQuery click handler</div>
<div class="modal fade" id="server_msg_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Modal body</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->