单击按钮时使用 Jquery 显示 div 作为弹出窗口

Question

我正在学习 Jquery 并遇到了这个问题，我不得不在按钮点击时显示 div 作为弹出窗口，关于如何实现这个的相同 window.Any 建议？

Answer 1

你可以试试jquery ui dialog喜欢，

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

Answer 2

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

单击按钮时使用 Jquery 显示 div 作为弹出窗口

Display a div as popup using Jquery on button click

javascript

asp.net

jquery

jquery-ui