Javascript 如何在按钮单击时打开模态弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37986587/
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
How to open Modal popup on button click
提问by platanas20
I have this link-button:
我有这个链接按钮：
<a href="javascript: void(0)"><button class="btn btn-primary pull-right" id="btn">Read More</button></a>
I want onclickhit, a modal popup appears with all the article details.I have tried a lot until now but nothing runs properly.Any ideas?
我想要onclick点击，出现一个包含所有文章详细信息的模式弹出窗口。到目前为止，我已经尝试了很多，但都没有正常运行。有任何想法吗？
UPDATED
更新
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false
})
$('#btn').click(function() {
$("#dialog").dialog({
modal: true,
height: 600,
width: 500,
buttons: {
Accept: function() {
$(this).dialog("close");
}
}
});
$('#dialog').dialog('open');
});
});
UPDATED (image)
更新（图片）
回答by kundan suthar
If you are using Bootstrap , please see below example
如果您使用的是 Bootstrap ，请参见下面的示例
<div class="modal fade" id="modelWindow" role="dialog">
<div class="modal-dialog modal-sm vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Heading</h4>
</div>
<div class="modal-body">
Body text here
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
$('#btn').click(function() {
$('#modelWindow').modal('show');
});
回答by Sk. Tajbir
I think the main problem is with this code:
我认为主要问题在于这段代码：
<a href="">
As there is no value in href, so whenever you'll click on the button actually it will click on that anchor tag and the page will refresh. You can use this:
由于 href 中没有值，因此无论何时您实际上单击按钮，它都会单击该锚标记并且页面将刷新。你可以使用这个：
<a href="javascript:void(0);">
Or on the click function you can get the event and use preventDefault.
或者在单击功能上，您可以获得事件并使用 preventDefault。
Hope this will help you. Thanks.
希望这会帮助你。谢谢。
