Javascript 在按钮单击时使用 Jquery 将 div 显示为弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29091490/
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
Display a div as popup using Jquery on button click
提问by Harsh Singhi
I am learning Jquery and came across this problem where I had to display div as popup on button click in the same window.Any suggestion on how to achieve this ?
我正在学习 Jquery 并遇到了这个问题，我必须在同一窗口中单击按钮时将 div 显示为弹出窗口。有关如何实现这一点的任何建议？
回答by Rohan Kumar
You can try jquery ui dialoglike,
您可以尝试jquery ui 对话框，例如，
HTML
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
SCRIPT
脚本
$(function() {
$( "#dialog" ).dialog();
});
Also you can try bootstrap modal
你也可以尝试引导模式
回答by Wesley Smith
You could use jquery ui dialog, or, if you want to get more ...fancy, you could use fancybox:
你可以使用jQuery UI的对话，或者，如果你想获得更多...花哨，你可以使用的fancybox：
$(document).ready(function() {
$("a#inline").fancybox({
'hideOnContentClick': true
});
});.btn{
border: 1px solid #006;
color:#01ACEE;
font: bold 16px Tahoma;
border-radius:7px;
padding:4px;
}<link rel="stylesheet" href="http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.mousewheel-3.0.4.pack.js"></script>
<a id="inline" class="btn" href="#data">My Button</a>
<div style="display:none">
<div id="data">
<img alt="" src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg"><br>
<h3>My Cool Title</h3>
<p>Put your cool item descrtiption here</p>
</div>
</div>