QQ小程序6大功用_jQuery完成弹窗居中效果类似ale

jQuery实现弹窗居中效果类似alert()       本文给大家分享基于jquery实现弹窗居中效果类似于alert(),代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下

效果图如下所示:

废话不多说了,直接给大家贴代码了,具体代码如下所示:

 !DOCTYPE HTML 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 title 弹出确认框始终位于窗口的中间位置的测试 /title 
 style type="text/css" 
.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); display: none; z-index: 99; }
.mess { position: absolute; display: none; width: 250px; height: 100px; border: 1px solid #ccc; background: #ececec; text-align: center; z-index: 101; }
 /style 
 script type="text/javascript" src="jquery-1.7.1.min.js" /script 
 script type="text/javascript" 
$(document).ready(function() {
$('.btn').click(function() {
$('.mask').css({'display': 'block'});
center($('.mess'));
check($(this).parent(), $('.btn1'), $('.btn2'));
// 居中
function center(obj) {
var screenWidth = $(window).width();
screenHeight = $(window).height(); //当前浏览器窗口的 宽高
var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度
var objLeft = (screenWidth - obj.width())/2 ;
var objTop = (screenHeight - obj.height())/2 + scrolltop;
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});
//浏览器窗口大小改变时
$(window).resize(function() {
screenWidth = $(window).width();
screenHeight = $(window).height();
scrolltop = $(document).scrollTop();
objLeft = (screenWidth - obj.width())/2 ;
objTop = (screenHeight - obj.height())/2 + scrolltop;
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});
//浏览器有滚动条时的操作、
$(window).scroll(function() {
screenWidth = $(window).width();
screenHeight = $(widow).height();
scrolltop = $(document).scrollTop();
objLeft = (screenWidth - obj.width())/2 ;
objTop = (screenHeight - obj.height())/2 + scrolltop;
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});
//确定取消的操作
function check(obj, obj1, obj2) {
obj1.click(function() {
obj.remove();
closed($('.mask'), $('.mess'));
obj2.click(function() {
closed($('.mask'), $('.mess'));
// 隐藏 的操作
function closed(obj1, obj2) {
obj1.hide();
obj2.hide();
 /script 
 /head 
 body 
 input type="button" value="btn"/ 
 div 弹出确认框始终位于窗口的中间位置的测试 /div 
 div /div 
 div 
 p 确定要删除吗? /p 
 p input type="button" value="确定" / 
 input type="button" value="取消" / /p 
 /div 
 /body 
 /html 

以上所述是小编给大家介绍的jQuery实现弹窗居中效果类似alert(),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




扫描二维码分享到微信