jquery弹出框插件--jqModal

冀越

2023-12-01

jqModal是jquery弹窗插件，个人觉得jqModal强大方便，在此做记录以备忘。

登录jqModal主页http://dev.iceburg.net/jquery/jqModal/index.php可以看到全面了解该组件的信息。

1、在<head></head>中加入如下js和css

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jqModal.js"></script>
<link type="text/css" href="Css/jqModal.css" rel="Stylesheet" />
<script type="text/javascript">
     $().ready(function() { 
           $('#dialog').jqm(); 
      });
</script>

2、在mqModal.css中修改如下样式

.jqmWindow{
       display: none; //此外要设为display=none,使弹出框最开始隐藏
       position: fixed; 
       top: 17%; 
       left: 50%; 
       margin-left: -300px; 
       width: 600px; 
       background-color: #EEE; 
       color: #333;
       border: 1px solid black;    
       padding: 12px;
}

3、html页面，注意加粗的字体

<a href="#" class="jqModal">view</a>...    //点出view弹出对话框，class=jqModal
<div class="jqmWindow" id="dialog">    //此为弹出框的内容，弹出框的最外层样式为jqmWindow与上述css中的样式名一致且id=dialog与上述<script>中的一致，
    //点击close关闭弹出框，close的样式为jqmClose
   <a href="#" class="jqmClose">Close</a><hr><em>READ ME</em> 
   -->This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.The demonstrations on this page will show off a few 
   possibilites. I recommend walkingthrough each one to get an understanding of jqModal <e    m>before</em> using it.<br /><br />You can view the 
   sourcecode of examples by clicking the Java script, CSS, and HTML tabs.Be sure to checkout the <a href="README">documentation</a> too!<br /><br />
   <em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".Clicking the overlay will have no effect if the "modal" 
   parameter is passed, or if theoverlay is disabled. 
</div>

jquery弹出框插件--jqModal

相关阅读

相关文章

相关问答

相关文档