弹出Message

蔚落 2022-07-14 06:47 177阅读 0赞

开发过程中，经常需要弹出各种信息提示框，很多框架都自定义了提示框，有的框架或许没有，我们也可以使用alert ，confirm等IE自带的信息提示框，缺点就是太死板，无法修改其样式，所以很多时候是我们自定义提示框。

var cancleFlag  = 0;
    function msgbox(content, cancel, icon) {
    	if(null != cancel){
    		cancleFlag  = cancel;
    		}else{
    		cancleFlag = 0;}
    	/*		
    	参数列表说明:
    	title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常															
    	text  :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
    	func  :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
    	cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
    	focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上
    	icon  :弹出对话框的图标
    	Author:Jedliu
    	Blog  :Jedliu.cublog.cn 
    	【网页转载请保留版权信息,实际使用时可以除去该信息】
    	 */
    	icon = "msgbox_" + icon + ".png";
    	create_mask();
    	var temp = "<div style=\"width:300px;border: 3px solid rgb(224,224,224);background-color: #fff; font-weight: bold;font-size: 14px;\" >"
    			+ "<div style=\"line-height:25px; padding:0px 5px;background-color:rgb(224,224,224);\">"
    			+ "代理店システム"
    			+ "</div>"
    			+ "<table  cellspacing=\"0\" border=\"0\"><tr><td style=\" padding:0px 0px 0px 20px; \"><img style=\" margin:0px 20px 0px 0px; \" src=\" ../resources/Themes/Images\\" + icon + "\" width=\"32\" height=\"32\"></td>"
    			+ "<td ><div style=\"width:200px;background-color: #fff; font-weight: bold;font-size: 14px;padding:20px 0px ; text-align:center;\">"
    			+ content
    			+ "</div></td></tr></table>"
    			+ "<div style=\"text-align:center; padding:0px 0px 20px;background-color: #fff;\"><input type='button'  style=\"border:1px solid #CCC; background-color:#CCC; width:50px; height:25px;\" value='OK'id=\"msgconfirmb\"   οnclick=\"remove(); ok();\">";
    	if (null != cancel) {
    		temp += "   <input type='button' style=\"border:1px solid #CCC; background-color:#CCC; width:80px; height:25px;\" value='キャンセル'  id=\"msgcancelb\"   onClick=\"remove(); cancle();\">";
    	}
    	temp += "</div></div>";
    	create_msgbox(400, 200, temp);
    	document.getElementById("msgconfirmb").focus();
    }
    function get_width() {
    	return (document.body.clientWidth + document.body.scrollLeft);
    }
    function get_height() {
    	return (document.body.clientHeight + document.body.scrollTop);
    }
    function get_left(w) {
    	var bw = document.body.clientWidth;
    	var bh = document.body.clientHeight;
    	w = parseFloat(w);
    	return (bw / 2 - w / 2 + document.body.scrollLeft);
    }
    function get_top(h) {
    	var bw = document.body.clientWidth;
    	var bh = document.body.clientHeight;
    	h = parseFloat(h);
    	return (bh / 2 - h / 2 + document.body.scrollTop);
    }
    function create_mask() {//创建遮罩层的函数
    	$("body").append("<div id='mask' style ='background: black; position: absolute; z-Index:9999; opacity:0.4'/>");
    /*	var mask = document.createElement("div");
    	mask.id = "mask";
    	mask.style.position = "absolute";
    	mask.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置
    	mask.style.opacity = 0.4;//Mozilla的不透明设置
    	mask.style.background = "black";
    	mask.style.top = "0px";
    	mask.style.left = "0px";*/
    	$("#mask").css('top','0px');
    	$("#mask").css('left','0px');
    	$("#mask").css('width',get_width()+'px');
    	$("#mask").css('height',get_height()+'px');
    	//mask.style.width = get_width();
    	//mask.style.height = get_height();
    	// mask.style.zIndex = 9999;
    	//document.body.appendChild(mask);
    	
    }
    function create_msgbox(w, h, t) {//创建弹出对话框的函数
    	var box = document.createElement("div");
    	box.id = "msgbox";
    	box.style.position = "absolute";
    	box.style.width = w;
    	box.style.height = h;
    	box.style.overflow = "visible";
    	box.innerHTML = t;
    	box.style.zIndex = 10001;
    	//document.body.appendChild(box);
    	$("body").append(box);
    
    	re_pos();
    }
    function re_mask() {
    	/*
    	更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容
    	 */
    	//var mask = document.getElementById("mask");
    	var mask = $("#mask");
    	if (null == mask)
    		return;
    	//mask.style.width = get_width() + "px";
    	//mask.style.height = get_height() + "px";
    	mask.css('width',get_width() + "px");
    	mask.css('height',get_height() + "px");
    	
    }
    function re_pos() {
    	/*
    	更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间
    	 */
    	var box = $("#msgbox");
    	if (null != box) {
    		//var w = box.style.width;
    		//var h = box.style.height;
    		var w = box.css('width');
    		var h = box.css('height');
    		//box.style.left = get_left(w) + "px";
    		//box.style.top = get_top(h) + "px";
    		
    		box.css('left', get_left(w) + "px");
    		box.css('top', get_top(h) + "px");
    	}
    }
    function remove() {
    	/*
    	清除遮罩层以及弹出的对话框
    	 */
    	var mask = document.getElementById("mask");
    	var msgbox = document.getElementById("msgbox");
    	if (null == mask && null == msgbox)
    		return;
    	document.body.removeChild(mask);
    	document.body.removeChild(msgbox);
    }
    
    function re_show() {
    	/*
    	重新显示遮罩层以及弹出窗口元素
    	 */
    	re_pos();
    	re_mask();
    }
    
    function ok() {
    	if(1 == cancleFlag){del();
    	}
    }
    
    function cancle() {
    	return false;
    }

![Center][] ![Center 1][]

[Center]: https://img-blog.csdn.net/20161130231150876?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220714/8f2b92ef469e48d38c438e6f354d6e10.png

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 js弹出窗口(JS弹出窗口代码)

javascript 打开窗口方法有几种?? showModalDialog("url",要传的参数,"画面的一些设置") showModelessDialog()

忘是亡心i/ 2023年09月26日 14:46/ 0 赞/ 137 阅读

相关如何限制element-ui的message只弹出一个

页面同时出现多个提示框不是很美观，那么如何限制同一时刻仅出现一个弹窗呢？解决方案：每次弹窗都会出现类名为el-message的元素，通过判断该元素是否存在来限制是否弹

红太狼/ 2022年11月20日 02:58/ 0 赞/ 364 阅读

相关弹出Message

开发过程中，经常需要弹出各种信息提示框，很多框架都自定义了提示框，有的框架或许没有，我们也可以使用alert ，confirm等IE自带的信息提示框，缺点就是太死板，无法修改其

蔚落/ 2022年07月14日 06:47/ 0 赞/ 178 阅读

相关底部弹出

项目中做了一个底部弹出，记录在此。 ![70][] ![70 1][] css： html, body \{ width: 100%; heig

傷城~/ 2022年05月21日 01:06/ 0 赞/ 268 阅读

相关多个弹出框，弹出不同内容

1、被点击的地方用同样的class='test' 2、 $(".test").each(function(i,v){ var nodei = i;

比眉伴天荒/ 2022年05月14日 14:04/ 0 赞/ 307 阅读

相关 Element-ui 之 Message，自动弹出，无法显示。

目的：解决Message，自动弹出，和无法显示的问题。一：解决自动弹出的问题 ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

蔚落/ 2022年05月13日 03:12/ 0 赞/ 354 阅读

相关 Antd的Message怎么限制弹出次数

之前的效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

曾经终败给现在/ 2022年03月08日 19:44/ 0 赞/ 226 阅读

相关弹出窗口

【1、普通的弹出窗口】其实代码非常简单： <SCRIPT LANGUAGE=javascript> <!-- window.open ('page.ht

系统管理员/ 2022年01月09日 05:35/ 0 赞/ 389 阅读

相关 sharepoint 弹出

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码 function myCallback(dialo

一时失言乱红尘/ 2021年12月16日 20:25/ 0 赞/ 264 阅读

相关处理element-ui message组件多次弹出问题

一个页面请求多个接口时，如果多个接口返回异常或者错误时，message组件会多次弹出。这里对element-ui 的message组件做一层封装，防止此类问题出现 sr

末蓝、/ 2021年10月01日 11:02/ 0 赞/ 506 阅读