一个基于jquery的弹出窗插件 WmPop演示代码

时间：2013-08-21 08:30 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery弹窗插件——WmPop</title>
<style>
a:link,a:visited{color:#36c;}
body{color:#404040;font-family:"微软雅黑","黑体";}
#page{width:auto; text-align:left;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
#header{height:100px; text-align:center;background: #fff;background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));background: -moz-linear-gradient(top,  #fff,  #ededed);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');border-bottom: solid 1px #b7b7b7;color:#606060;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}
#header h2{font-size:18px; line-height:50px;}
#content{padding-top:30px; width:800px; margin:0 auto;}
/* 窗口样式 */
.popwin{width:400px;border:1px solid #999;background-color:#FFF;position:absolute;top:0;left:0;z-index:1001;text-align:left; visibility:hidden;}
.popwin .popwin-hd,.popwin .popwin-hd h2{height:36px;color:#000;background:#E5E5E5;}
.popwin .popwin-hd h2{padding-left:8px;line-height:36px; font-size:16px;overflow:hidden;font-weight:bold;}
.popwin .popwin-bd{padding:10px;background-color:#fff;}
.popwin .popwin-close{display:block; height:15px;width:15px;position:absolute;right:16px;top:13px; font:bold 14px/14px Tahoma, Geneva, sans-serif;}
.popwin .popwin-close:hover{ text-decoration:none; color:#000;text-indent:none;}
.mark {background-color:#CCC;left:0;opacity:0.5;position:absolute;top:0;z-index:1000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;visibility:hidden;}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#openit").wmPop({target:"#WmPopWin"});
});
;(function($){
    $.fn.wmPop = function(options){
var defaults = {
            opacity: 0.5,
	target:null,
	drag:true,
	visibility:false,
            html: ''
},_this=this;
	this.WM = $.extend(defaults, options);
	var B = null, C = null, $win = $(window), $t=$(this);
	this.showpopWin=function (){
            B = $("<div id='mask' class='mark'></div>").css("opacity",_this.WM.opacity).dblclick(function(){
                _this.close();
            }).appendTo("body").fadeIn(100);
            C = $(_this.WM.target);
            setPosition();
B.css("visibility","visible")
C.css("visibility","visible").find('.popwin-close').click(_this.close);
}	
function setPosition(){
            if (!C) {
                return false;
            }	
            var width = C.width(), lt = calPosition(width);
            C.css({
                left: lt[0],
                top: lt[1]
            });
            var $h = $("body").height(), $wh = $win.height(),$hh=$("html").height();
            $h = Math.max($h, $wh);
            B.height($h).width($win.width())            
}	
function calPosition(w){
            l = ($win.width() - w) / 2;
            t = $win.scrollTop() + $win.height() /8;
            return [l, t];
        }	
	this.close=function (){
            if (C) {
                B.fadeOut(100).remove();
                C.css("visibility","hidden");
            }
        }
        $win.resize(function(){
            setPosition();
        });
_this.WM.visibility?_this.showpopWin():$t.click(function(){
            _this.showpopWin();
            return false;
        });
return this;	
}
})(jQuery);</script>
</head>
<body>
<div id="page">
<div id="header">
<h2>Jquery弹窗插件：WmPop</h2><span>DEMO</span>
</div>
<div id="content">
    <a id="openit" href="javascript:void(0)">弹出窗口</a>
        <div id="WmPopWin" class="popwin code-popup">
            <div class="popwin-hd"><h2>我是弹出窗口</h2></div>
            <div class="popwin-bd">在原层级关系下的弹出窗口</div>
            <a title="关闭" class="popwin-close" href="javascript:void(0)">X</a>
        </div>
    </div>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

一个基于jquery的弹出窗插件演示代码，点击网页上的链接即可弹出一个漂亮的提示框，颜色风格不是自己喜欢类型的话，那就自己动手美化一下吧，修改CSS文件就可以了。本弹出窗口分层次关系，在原层级关系下的弹出窗口。一个基于jquery的弹出窗插件 WmPop演示代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/chuangkou/5460.html

一个基于jquery的弹出窗插件 WmPop演示代码

网页特效