<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
function remind(msg){
var max_width = 950;
var min_width = 250;
var font_size = 14;
/*
* 遮罩层
*/
$(‘body‘).prepend(‘<div id="tlj_shade"></div>‘);
$(‘#tlj_shade‘).css(
{
‘position‘:‘fixed‘,
‘left‘:‘0‘,
‘right‘:‘0‘,
‘top‘:‘0‘,
‘bottom‘:‘0‘,
‘opacity‘:‘0.4‘,
‘background‘:‘black‘
}
);
/*
* 弹窗
*/
var confirm_pop = ‘<div id="tlj_confirm">‘; //弹窗HTML结构
confirm_pop += ‘<div id="confirm_top">‘+msg+‘</div>‘;
confirm_pop += ‘<div id="confirm_bottom">‘;
confirm_pop += ‘<div id="button_box" >‘;
confirm_pop += ‘<input type="button" value="确定" name="yes"/>‘;
confirm_pop += ‘<input type="button" value="取消" name="no"/>‘;
confirm_pop += ‘ </div>‘;
confirm_pop += ‘ </div>‘
confirm_pop += ‘</div>‘;
$(‘body‘).prepend(confirm_pop); //将弹窗添加进body
var remind_pop = $(‘#tlj_confirm‘); //弹窗对象
remind_pop.css( //弹窗样式
{
‘max-width‘ : max_width + ‘px‘,
‘min-width‘ : min_width + ‘px‘,
‘border‘:‘1px solid black‘,
‘position‘:‘absolute‘,
‘z-index‘:‘3‘
}
);
/*
* 弹窗信息区
*/
var confirm_top = $(‘#confirm_top‘);
confirm_top.css(
{
‘text-align‘ : ‘center‘,
‘font-size‘ : font_size+ ‘px‘,
‘padding‘ : ‘45px 20px 35px 20px‘,
‘background‘ : ‘white‘,
‘word-break‘ : ‘break-all‘
}
);
if (remind_pop.width() == 950) {
confirm_top.css(
{
‘text-align‘ : ‘left‘
}
);
}
//弹窗按钮区
$(‘#confirm_bottom‘).css(
{
‘height‘ : ‘55px‘,
‘background‘ : ‘#F2F2F2‘,
‘line-height‘ : ‘55px‘,
‘text-align‘ : ‘center‘
}
);
$(‘#confirm_bottom input‘).css(
{
‘padding‘ : ‘0 15px‘,
‘margin‘ : ‘0 5px‘,
}
);
$(‘#confirm_bottom input[name=yes]‘).bind(‘click‘,function(){ //点"确定"返回true
$(‘#tlj_confirm‘).hide(); //弹窗关闭
$(‘#tlj_shade‘).hide(); //遮罩层关闭
return true;
});
$(‘#confirm_bottom input[name=no]‘).bind(‘click‘,function(){ //点"取消"返回false
$(‘#tlj_confirm‘).hide();
$(‘#tlj_shade‘).hide();
return false;
});
/*
* 弹窗位置
*/
var left = screen.availWidth / 2 - remind_pop.width() / 2;
var top = (screen.availHeight - 300 - remind_pop.height())/2;
remind_pop.css( //弹窗样式
{
‘left‘ : left + ‘px‘,
‘top‘ : top + ‘px‘
}
);
}
</script>
<body>
<input type="button" value="点" onclick="remind(‘啊啊啊啊‘)"/>
</body>
</html>
自定义弹框
时间： 2024-10-07 12:46:09