jquery弹出框插件--jqModal

4 篇文章 0 订阅
2 篇文章 0 订阅

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>


相关下载地址:

jqModal.js(网站上他们叫plugin),地址是http://dev.iceburg.net/jquery/jqModal/jqModal.js

jqModal.css(网站上他们叫styling),地址是http://dev.iceburg.net/jquery/jqModal/jqModal.css

jquery-1.3.2.min.js,组件下载地址是http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值