首页 > 代码库 > 自定义弹框
自定义弹框
<!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="http://www.mamicode.com/确定" name="yes"/>‘; confirm_pop += ‘<input type="button" value="http://www.mamicode.com/取消" 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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。