复制代码 代码如下: /* 弹出窗口定位到浏览器中间 1. show(options{ height:高度 width:宽度 speed:渐显时间 默认0 container:包含的html内容的jquery对象 model:是否是模态窗口，默认true，模态对话框就是在弹层下面在覆盖遮罩层，参考上篇文章Overlay实现 }) 2. close(speed:淡出时间 默认0) */ Q.Panel = function() { var self = this; self._resetPosition = function() { self._container.css("top", self._getTop()); self._container.css("left", self._getLeft()); }; self._getTop = function() { return Q.bom.scrollY() + (Q.bom.windowHeight() - self._options.height) / 2; }; self._getLeft = function() { return (Q.dom.pageWidth() - self._options.width) / 2; }; self.show = function(options) { self._options = $.extend({ width: 350, height: 200, opacity: 0.5, model: true, speed: 0 }, options || {}); self._container = self._options.container; var css = { 'width': self._options.width, 'height': self._options.height, 'z-index': Q.Overlay.zindex, 'position': 'absolute', 'left': self._getLeft(), 'top': self._getTop(), 'display': 'none' }; self._container.css(css); if (self._options.model) { self._overlay = new Q.Overlay(self._options.opacity); self._overlay.show(); } $(window).scroll(self._resetPosition); $(window).resize(self._resetPosition); $(document.body).append(self._container); self._container.fadeIn(self._options.speed); Q.Overlay.zindex++; //没弹出一次就递增，防止多个弹层重叠 }; self.close = function(speed) { $(window).unbind('resize', self._resetPosition); $(window).unbind('scroll', self._resetPosition); self._container.fadeOut(speed || 0, function() { self._container.remove(); if (self._options.model) { self._overlay.close(); } }); }; }; 这里居中是通过js控制的,下面是几个用这个剧中Panel实现的通用对话框 复制代码 代码如下: /*弹出自定义隐藏框 <div id="league" style="display:none"> <button class="close" >close</button> </div> Q.showPanel("league", function(panel, container) { container.find(".close").click(function() { panel.close(); } ); */ Q.showPanel = function(containerId, registerEventCallback) { var container = $("#" + containerId); var height = container.height(); var width = container.width(); container = container.clone(true); var options = { height: height, width: width, container: container }; var panel = new Q.Panel(); registerEventCallback(panel, container); panel.show(options); }; /*弹出窗口，从url加载窗体html片段*/ Q.openWindow = function(url, data, registerEventCallback) { $.get(url, data, function(html) { var panelDiv = $(html); panelDiv.hide(); $(document.body).append(panelDiv); var options = { height: panelDiv.height(), width: panelDiv.width(), container: panelDiv }; var panel = new Q.Panel(); registerEventCallback(panel, panelDiv); panel.show(options); }); } /*提示框，3秒后自动淡出*/ Q.tips = function(msg) { var html = '<div class="gu_layer w330">' + '<div class="gu_layer_main">' + '<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif">提示</h2>' + '<p class="gu_layer_txt">' + msg + '</p>' + '<div class="gu_layer_btn"></div>' + '</div></div>' var container = $(html); container.hide(); $(document.body).append(container); var panel = new Q.Panel(); panel.show({ container: container, height: container.height(), width: container.width() ,speed:500}); setTimeout(function() { panel.close(500); }, 3000); }; /*提示框*/ Q.alert = function(msg) { var html = '<div class="gu_layer w330">' + '<div class="gu_layer_main">' + '<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a>提示</h2>' + '<p class="gu_layer_txt">' + msg + '</p>' + '<div class="gu_layer_btn"><a class="btn_org" href="">确 定</a></div>' + '</div></div>' var container = $(html); container.hide(); $(document.body).append(container); var panel = new Q.Panel(); container.find(".btn_tit_close").click(function() { panel.close(); return false; }); container.find(".btn_org").click(function() { panel.close(); return false; }); panel.show({ container: container, height: container.height(), width: container.width() }); }; /*确认框 cancel回调为可选*/ Q.confirm = function(title, msg, yes, cancel) { var html = '<div class="gu_layer w330">' + '<div class="gu_layer_main">' + '<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a>' + title + '</h2>' + '<p class="gu_layer_txt">' + msg + '</p>' + '<div class="gu_layer_btn"><a class="btn_org" href="">确 定</a><a class="btn_gray" href="">取 消</a></div>' + '</div></div>' var container = $(html); container.hide(); $(document.body).append(container); var panel = new Q.Panel(); container.find(".btn_tit_close").click(function() { panel.close(); return false; }); container.find(".btn_gray").click(function() { if (cancel) cancel(); panel.close(); return false; }); container.find(".btn_org").click(function() { if (yes) yes(); panel.close(); return false; }); panel.show({ container: container, height: container.height(), width: container.width() }); };

　　推荐阅读

　　JavaScript的类型转换(字符转数字 数字转字符)

在Java中，基本类型之间的强制转换也不是这样的，比如，整数要转换成字符串，必须使用Integer.toString()静态方法或者String.valueOf()静态方法，把字符串转换为整数，必须使用Integer.valueOf()。 可见，不能把Ja>>>详细阅读

本文标题：jquery实现居中弹出层代码

地址：http://www.17bianji.com/kaifa2/JS/25795.html

 1/2    1