在做一个系统时,很多时候需要把一个页面弹出来,让用户做选择一些选择或者页面太小也可以以弹出框的形式来做。但是又不想用浏览器自带的弹出框,这时我们需要自己做一个。下面我们就做一个最简单的弹出框,即有一个阴影遮盖层,然后做一个居中显示的层,最后在居中的层中加一个iframe即可,一个弹出层就做好了。
示例
CSS代码
View Code
html, body { height: 100%; padding: 0; margin: 0; } .dFilter { position: absolute; 100%; height: 100%; z-index: 999; background-color:Gray; left: 0px; top: 0px; } .dBody { position: absolute; z-index: 1000; border: 2px solid #C4D9F6; background-color: white; } .dHeader { background-image: url(../img/bg_bar02.jpg); height: 20px; 100%; line-height: 20px; } .dHeader label { color: Black; float: left; font-weight: bold; margin-left: 5px; line-height:20px; } .dHeader img { float: right; height:18px; 18px; background-image: url(../img/close.png); }
JS 代码
View Code
/* Create By:Mike.Jiang Create Date:2012-07-03 */ var Dialog = { RemoveDialog: function() { $("#dFilter").remove(); $("#dBody").remove(); Dialog.ShowSelect(); } } $(function() { $.fn.extend({ ShowDialog: function(options) { //插件内部函数 var nFun = { HideSelect: function() { $("select").hide(); }, ShowSelect: function() { $("select").show(); }, RemoveDialog: function() { $("#dFilter").remove(); $("#dBody").remove(); nFun.ShowSelect(); }, CenterShow: function(dBody, width, height) { var topPX = 0; topPX = $(document.documentElement).height() - height; if (topPX < 0) { topPX = 0; } else { topPX = $(document.documentElement).scrollTop() + topPX / 2; } var leftX = $(document.documentElement).width() - width; if (leftX < 0) { leftX = 0; } else { leftX = $(document.documentElement).scrollLeft() + leftX / 2; } dBody.css({ "left": leftX + "px", "top": topPX + "px" }); } } var settings = { height: 400, //弹出框的高度 400, //弹出框的宽度 title: "标题", // 弹出框的标题 src: "", //弹出框的页面URL beforeShow: nFun.HideSelect, //在显示弹出框之前的方法 afterClose: nFun.ShowSelect //在关闭弹出框之后的方法 }; if (options) { $.extend(settings, options); } nFun.RemoveDialog(); settings.beforeShow(); //背影遮盖(是否为模式窗口) var dFilter = $('<div id="dFilter" class="dFilter"></div>').appendTo(document.body); dFilter.css("opacity", "0.5"); dFilter.css("height", $(document).height()); dFilter.css("width", $(document).width()); //弹出页面的主DIV var dBody = $('<div id="dBody" class="dBody" ></div>').appendTo(document.body); var dBodyHeight = settings.height + 20; dBody.css({ "width": settings.width + "px", "height": dBodyHeight + "px" }); //弹出页面的头部 var dHeader = $('<div class="dHeader" ></div>').appendTo(dBody); //弹出页面的标题 var dTitle = $('<label></label>').appendTo(dHeader); dTitle.text(settings.title); //弹出页面的关闭按钮 var dClose = $('<img alt="" />').appendTo(dHeader); //弹出页面的内容容器iframe var dIframe = $('<iframe frameborder="0" ></iframe>').appendTo(dBody); //设置弹出框的宽高 var dIframeWidth = settings.width; dIframe.attr({ "width": dIframeWidth + "px", "height": settings.height + "px", "src": settings.src }); //设置弹出框居中显示 nFun.CenterShow(dBody, settings.width, settings.height); //关闭按钮事件 dClose.click(function() { nFun.RemoveDialog(); settings.afterClose(); }); $(window).resize(function() { nFun.CenterShow(dBody, settings.width, settings.height); }); } }); });
HTML代码
View Code
<script type="text/javascript"> $(document).ready(function() { $("#btnPopup").click(function() { $(window).ShowDialog({ 800, height: 400, title: "博客园", src: "http://www.cnblogs.com" }); }); }); </script>