在按钮单击时使用 Jquery 将 div 显示为弹出窗口答案

【问题标题】：Display a div as popup using Jquery on button click在按钮单击时使用 Jquery 将 div 显示为弹出窗口
【发布时间】：2015-05-19 10:23:27
【问题描述】：

我正在学习 Jquery，遇到了这个问题，我必须在同一个窗口中单击按钮时将 div 显示为弹出窗口。关于如何实现这一点的任何建议？

【问题讨论】：

见jqueryui.com/dialog

标签： javascript jquery asp.net jquery-ui

【解决方案1】：

您可以使用 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>

【讨论】：

【解决方案2】：

你可以试试jquery ui dialoglike，

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>

脚本

$(function() {
    $( "#dialog" ).dialog();
});

你也可以试试bootstrap modal

【讨论】：