單擊按鈕時使用Jquery將div顯示為彈出窗口

Question

我正在學習Jquery並遇到了這個問題，我不得不在同一窗口中單擊按鈕時將div顯示為彈出窗口。關於如何實現這一點的任何建議？

Answer 1

您可以嘗試使用jQuery UI對話框 ，

的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();
});

您也可以嘗試引導模態

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>