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

Question

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

Answer 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>