Jquery弹窗插件 WmPop演示代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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 type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Jquery弹窗插件 WmPop演示代码

分类

jQuery实例

描述

一个基于jquery的弹出窗插件演示代码，点击网页上的链接即可弹出一个漂亮的提示框，颜色风格不是自己喜欢类型的话，那就自己动手美化一下吧，修改CSS文件就可以了。本弹出窗口分层次关系，在原层级关系下的弹出窗口。