首页 > 编程语言 >javascript: confirm alert box costomer style

javascript: confirm alert box costomer style

时间：2023-09-02 14:11:54浏览次数：39  
标签：box alertBox style confirm height width alertOkBtn border

 

// JavaScript Document
/*
參考資源:
https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
https://reactkungfu.com/2015/08/beautiful-confirm-window-with-react/
https://www.jquery-az.com/javascript-confirm-alert-box-fancy-and-simple-with-5-online-demos/
https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/
https://www.aspsnippets.com/Articles/Server-Side-Code-Behind-Yes-No-Confirmation-Message-Box-in-ASPNet.aspx
http://fabien-d.github.io/alertify.js/
https://sweetalert.js.org/
https://github.com/t4t5/sweetalert
self.location.href;//当前页面打开URL页面
window.location.href;//当前页面打开URL页面
this.location.href;//当前页面打开URL页面
location.href;// 当前页面打开URL页面
parent.location.href;//在父页面打开新页面
top.location.href;//在顶层页面打开新页面
還有其它中文資源
*/

var alertList = [];

/**  
 * 函数说明
 * @function function(text,title,btnOkVale,btnCancelVale,golink) 重置提示框
 * @param text{String} 要提示的文本内容
 * @param title{String} 提示框的标题
 * @param btnOkVale 按钮名称
 * @param btnCancelVale 按钮名称
 * @param golink  要打开链接地址
 * @version 4.0
 * @edit geovindu 
 * @date 20230817 20230902
 * @eg confirm("程序结束!!!","网页提示","關閉","取消")
 * @eg confirm("程序结束!!!","网页提示","關閉","取消","http://www.dusystem.com")
 */
window.confirm=function(text, title = "警告", btnOkVale="確定",btnCancelVale="取消", golink,callback) {
	
	var alertMain=document.createElement('div');
	var alertBox = document.createElement('div');
	var alertTitle = document.createElement('h4');
	var alertText = document.createElement('div');
	var alertOkBtn = document.createElement('button');
	var alertbtnCancelVale = document.createElement('button');
	
	alertMain.id="mainMessageBody";
	//alertMain.style.width="100%";
	//alertMain.style.height = "auto";
	//alertMain.style.display="none";
 	//alertMain.style.position="fixed";
	//alertMain.style.background="rgba(0,0,0,0)";
	//alertMain.style.top="0px";
	//alertMain.style.left="0px";
	//alertMain.style.zIndex="800";
	alertMain.className="mainMessageBody";
	//alertMain.style.textAlign="center";
	
	
	//alert弹窗整体样式
	//alertBox.style.width = "50%";
	//alertBox.style.height = "465px";//fit-content
	//alertBox.style.position = "relative";//fixed 
	//alertBox.style.marginLeft="auto";
	//alertBox.style.marginRight="auto";
	//alertBox.style.zIndex = "199";
	//alertBox.style.boxSizing="border-box";
	//alertBox.style.left = "50%";
	//alertBox.style.top = "50%";
	//alertBox.style.transform = "translate(-50% ,-50%)";
	//alertBox.style.backgroundColor = "#fff";
	//alertBox.style.padding = "10px";
	//alertBox.style.border = "2px solid #946cac";
	//alertBox.style.borderRadius = "5px";
	//alertBox.style.fontFamily = "'Courier New', Courier, monospace";
	//alertBox.style.margin="-167px 0 0 -226px";
	//alertBox.style.padding="0 15px 20px 15px";
	//alertBox.style.border="2px solid #946cac";
	alertBox.id="messageBody";
	alertBox.className="messageBody";
	//alertBox.style.display = "none";
 
	//alert 标题样式
	//alertTitle.style.padding = "0";
	//alertTitle.style.margin = "0";
	//alertTitle.style.fontWeight = "600";
	//alertTitle.style.textAlign="center";
	//alertTitle.style.borderBottom="1px solid #cda6ae";
	alertTitle.id="Messagehead";
	alertTitle.className="Messagehead";
	alertTitle.innerText = title;
	// alertTitle.innerText = "挽月阁";
 
	//内容文本样式
	//alertText.style.margin = "10px 0";
	//alertText.style.lineHeight = "1.35";
	alertText.id="MessageContent";
	alertText.className="MessageContent";
	//alertText.style.textAlign="center";
	//alertText.style.code="#946cac";
	alertText.innerText = text;
	// alertText.innerText = "落霞与孤鹜齐飞,秋水共长天一色";
 
	//ok按钮
	//alertOkBtn.style.display = "block";
	//alertOkBtn.style.width = "60px";
	//alertOkBtn.style.height = "30px";
	//alertOkBtn.style.lineHeight = "27px";
	//alertOkBtn.style.padding = "2px";
	//alertOkBtn.style.marginLeft="auto";
	//alertOkBtn.style.marginRight="auto";
	//alertOkBtn.style.float = "right";
	//alertOkBtn.style.backgroundColor = "#946cac";
	//alertOkBtn.style.border = "1px solid transparent";
	//alertOkBtn.style.borderRadius = "2px";
	//alertOkBtn.style.backgroundClip = "content-box";
	// alertOkBtn.style.transform = "scale(0.8)";
	//alertOkBtn.style.fontWeight = "600";
	//alertOkBtn.style.fontFamily = "'Courier New', Courier, monospace";
	//alertOkBtn.style.textAlign="center";
	//alertOkBtn.style.fontSize = "15px";
	//alertOkBtn.style.color="#fff";
	alertOkBtn.id="MessagebtnConfirmOk";
	alertOkBtn.className="MessagebtnConfirmOk";
	alertOkBtn.innerText = btnOkVale;
	
	
	alertbtnCancelVale.id="MessagebtnCancel";
	alertbtnCancelVale.className="MessagebtnCancel";
	alertbtnCancelVale.innerText = btnCancelVale;
	
	
	//添加ok事件
	alertOkBtn.addEventListener("click", function() {
		if(golink!=null)
		{
		  $(window).attr('location',golink);
		}
		else
		{
			
			alert("Ok is clicked");

	     }		
			alertList.shift();
			alertMain.remove();
	
	  });
	
	//添加取消事件
	alertbtnCancelVale.addEventListener("click", function() {
		if(golink!=null)
		{
		  $(window).attr('location',golink);
		}
		else
		{
			
			alert("Cancel is clicked");

	     }		
			alertList.shift();
			alertMain.remove();

	});
	
	//無效
	/*alertOkBtn.click=function () {
  			alert("Ok is clicked");
		};

	alertbtnCancelVale.click=function () {
  			alert("Cancel is clicked");
		};*/
	
	//添加弹窗到弹窗数组alertBox
	alertList.push(alertMain);
 
	//向页面中添加元素	注意节点父子关系
	const parent=document.body.appendChild(alertMain);
	const child=parent.appendChild(alertBox);
	child.appendChild(alertTitle);
	child.appendChild(alertText);
	child.appendChild(alertOkBtn);
	child.appendChild(alertbtnCancelVale);
	
};

/*
定义计时器,判断弹窗数组是否为空
确保弹窗数组中的第一个弹窗一直是显示状态
当数组为空的时候清除计时器
*/
var yue = setInterval(function() {
	if (alertList.length != 0) {
		alertList[0].style.display = "block";
	} else {
		clearInterval(yue);
	}
}, 200);

　　

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">	
<title>成长之旅 geovindu,涂聚文，Geovin Du</title>
	<meta name="Description" content="geovindu,涂聚文，Geovin Du"/>
<meta name="Keywords" content="geovindu,涂聚文，Geovin Du"/>
<meta name="author" content="geovindu,涂聚文，Geovin Du"/>	
	 <link rel="stylesheet" href="../bootstrap/4.6.2/css/bootstrap.min.css">	
	 <script  src="../js/jquery-3.6.0.js"></script>
	<script  src="../popperjs/4.1/popper.min.js"></script>
	 <script src="../bootstrap/4.6.2/js/bootstrap.min.js" type="text/javascript"></script>	
  <script src="../ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>  
	 <script  type="text/javascript" src="../assets/js/DuSize.js"></script>
	<script type="text/javascript" src="MessgeBox/alert4.js"></script>
	<script type="text/javascript" src="MessgeBox/confirm.js"></script>
	<style type="text/css">

#mainMessageBody{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	position: fixed;	
	top: 0;
	left: 0;
	z-index: 800;
}
#messageBody{
	width: 468px;
	height: auto;
	padding: 0px 15px 20px 15px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 8px;
	position: relative;
	border: 1px solid #946cac;
	top: 50%;
	margin:auto;
}
#Messagehead{
	width: 100%;
	height: 45px;
	border-bottom: 2px solid #946cac;
	font-size: 16px;
    color: #333;
    line-height: 45px;
    text-align: center;
}
#MessageContent{
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 25px 40px 35px;
	text-align: center;
	font-size: 16px;
    color: #333;
    box-sizing: border-box;
    line-height: 28px;
}
#MessagebtnOk{
	display: block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    background-color: #946cac;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid transparent;
    margin: 0 auto;
    text-align: center
}
.MessagebtnConfirmOk{
	display: inline-block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    background-color:  #946cac;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 15%;
    margin-right: 10%;
}
.MessagebtnCancel{
	display: inline-block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    background-color:  #946cac;
    cursor: pointer;
    font-size: 14px;
     color: #fff;
    border-radius: 4px;
    border: 1px solid transparent;
    text-align: center;
    border: 1px solid transparent;
}

.ToastBox{
	width: 452px;
	height: auto;
	padding: 15px 20px;
	text-align: center;
	background: rgba(0,0,0,.5);
	color: #fff;
	font-size: 16px;
	border-radius: 8px;
	line-height: 24px;
	position: relative;
	top: 50%;
	left: 50%;
	margin: 0px 0px 0px -226px;
}
@media only  screen and (max-width: 767px) {
	#messageBody{
	width: 96%;
	height: auto;
		
	}
	
}
		
		
@media only screen and (max-width: 420px) {
.MessagebtnOk{
	display: inline-block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    background-color:  #946cac;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 17%;
    margin-right: 10%;
}
 }
  @media only screen and (max-width: 390px) {
.MessagebtnOk{
	display: inline-block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    background-color:  #946cac;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 16%;
    margin-right: 10%;
}
 }
 @media only screen and (max-width: 375px) {
.MessagebtnOk{
	display: inline-block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    background-color:  #946cac;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 14.5%;
    margin-right: 10%;
}
 }		
	</style>
</head>

<body>
<!---	<div id="mainMessageBody" class="mainMessageBody" style="display: block;"><div id="messageBody" class="messageBody"><h4 id="Messagehead" class="Messagehead">警告</h4><div id="MessageContent" class="MessageContent">哈哈哈！！！看，没有标题網地址，看到你了~_~</div><button id="MessagebtnConfirmOk" class="MessagebtnConfirmOk">關閉</button><button id="MessagebtnCancel" class="MessagebtnCancel">Canle</button></div></div>
-->
		<script type="text/javascript">
			
			
		//confirm("哈哈哈！！！看，没有标题網地址，看到你了~_~",'警告','關閉','Canle');	//不带网址
        //alert("哈哈哈！！！看，没有标题網地址，看到你了~_~",'警告','關閉','http://www.dusystem.com/'); //带网址
    </script>
</body>
</html>

　　

标签：box,alertBox,style,confirm,height,width,alertOkBtn,border
From： https://www.cnblogs.com/geovindu/p/17673621.html

相关文章

  • 学习笔记：在VirtualBox上安装最新版本的Ubuntu
    学习笔记：在VirtualBox上安装最新版本的Ubuntu1.安装Ubuntu虚拟机首先，我决定在我的笔记本电脑上安装Linux操作系统，以便更深入地了解Linux和学习一些Linux命令。我选择了在VirtualBox虚拟机中安装最新版本的Ubuntu。以下是我学习和执行这一任务的步骤：1.1下载并安装VirtualBox......
  • 基于jvm-sandbox实现一个简单功能的全链路压测agent
    目前我们已知chaosblade-exec-jvm是基于jvm-sandbox开发的混沌工程注入工具，我们可以基于jvm-sandbox创建一些其他的工具agent：流量回放agent、全链路压测agent等等接下来我会用完全的代码实现一个可以流量透传、mock挡板、影子表数据落地等功能的压测agent：MyAgentProject/|--age......
  • Virtualbox中FreeBSD安装lxqt桌面后鼠标无响应
    1程序版本及问题Virtualbox7.0FreeBSD13.1xorg7.7_3lxqt1.3.0virtualbox-ose-additions6.1.46问题：通过startx启动lxqt桌面后鼠标无响应。2问题解决步骤打开/etc/X11/xorg.conf文件1定位到ServerLayout新增一行Option"AutoAddDevices""false"如下：Section"S......
  • PyQt/PySide's qwindows.dll qwindowsvistastyle.dll is corrupted by UPX
    Windows1064-bitsPython3.8.1064-bitsPySide25.15.2PyInstaller4.3UPX4.1.0itraises:"ThisapplicationfailedtostartbecausenoQtplatformplugincouldbeinitialize"Solutioninspecfiles,addupx_exclude=['qwindows.dll'......
  • login;jsessionid=node07a53tu5ba3vd9k0wmsboxmq20.node0
    问题描述：shiro重定向到登入页面，登入地址出现了jsessionid=node07a53tu5ba3vd9k0wmsboxmq20.node0 解决方案：sessionManger中sessionIdUrlRewritingEnabled设置为false即可；<beanid="sessionManager"class="org.apache.shiro.web.session.mgt.DefaultWebSessionManage......
  • Proj CDeepFuzz Paper Reading: Deepxplore: Automated whitebox testing of deep lea
    Abstract背景：现有的深度学习测试在很⼤程度上依赖于⼿动标记的数据，因此通常⽆法暴露罕⻅输⼊的错误⾏为。本文：DeepXploreTask:awhite-boxframeworktotestDLModels方法：neuroncoveragedifferentialtestingwithmultipleDLsystems(models)joint-optimizationpro......
  • 病毒|木马|网址在线分析工具 沙箱 sandboxes
     virustotalVirusTotal是一个广泛使用的在线恶意软件分析平台，它提供了综合的文件和URL扫描服务。通过使用多个反病毒引擎和其他分析工具，VirusTotal能够检测和分析恶意软件、病毒、恶意URL和其他安全威胁。VirusTotal的一些主要特点和功能：文件和URL扫描：VirusTotal允许用户上传文......
  • Educational Codeforces Round 151 (Rated for Div. 2)E. Boxes and Balls（数学，动态规
    题目链接：https://codeforces.com/contest/1845/problem/E 题意： 给定长度为n且只含0和1的数组，你可以进行以下操作： 交换相邻的0和1； 给正整数k，问经过k次操作后，会有多少种本质不同的结果； 分析： 如果1比0多，我们可以把他们取反（让0比1多，结果是一样的） 设计状态dp[i][j......
  • 在VirtualBox中的CentOS 6.3下安装VirtualBox增强包
    在VirtualBox中的CentOS6.3下安装VirtualBox增强包 在VirtualBox中安装好客户操作系统(GuestOS)之后，建议安装VirtualBox增强包(VirtualBoxGuestAddition)，它的作用是对GuestOS的性能和可用性进行优化(也就是提高GuestOS的性能和提升使用者的使用体验)。 ......
  • Tkinter 列表控件Listbox使用
    1、使用StringVar初始化数据fromtkinterimport*importgjutil#初始化窗口root=Tk()root.title('listboxdemo')root.geometry(gjutil.getGeometry(root))#初始化数据array_lang_data=['python','golang','kotlin','dart......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99