使chrome兼容showModalDialog的方法

代码：main.html//定义window.showModalDialog如果它不存在if(window.showModalDialog == undefined){window.showModalDialog = function(url){if(window.hasOpenWindow){

h5css3_linhuai

14630人浏览 · 2017-05-22 18:21:45

h5css3_linhuai · 2017-05-22 18:21:45 发布

代码1：

<!DOCTYPE html>
<html>
<head>
	<title>main.html</title>
	<meta charset="utf-8">
	<script type="text/javascript"> 
		//定义window.showModalDialog如果它不存在  
		if(window.showModalDialog == undefined){  
		    window.showModalDialog = function(url){ 
		        if(window.hasOpenWindow){  
		            alert("您已经打开了一个窗口！请先处理它");//避免多次点击会弹出多个窗口  
		            window.myNewWindow.focus();  
		        }  
		        window.hasOpenWindow = true;  
		        window.myNewWindow = window.open(url);  
		    }  
		} 
		function showModal(){
			window.showModalDialog("http://www.baidu.com");
		}
	</script> 
</head>
<body>
<button type="button" onclick="showModal()">openModal</button>
</body>
</html>

代码2：

<!DOCTYPE html>
<html>
<head>
	<title>showModalDialog</title>
</head>
<body>
	<script type="text/javascript">
	//兼容谷歌
	if(!window.showModalDialog){
		window.showModalDialog=function(url,name,option){
			if(window.hasOpenWindow){
				window.newWindow.focus();
			}
			var re = new RegExp(";", "g");  
			var option  = option.replace(re, '","'); //把option转为json字符串
			var re2 = new RegExp(":", "g");
			option = '{"'+option.replace(re2, '":"')+'"}';
			option = JSON.parse(option);
			var openOption = 'width='+parseInt(option.dialogWidth)+',height='+parseInt(option.dialogHeight)+',left='+(window.screen.width-parseInt(option.dialogWidth))/2+',top='+(window.screen.height-30-parseInt(option.dialogHeight))/2;
			window.hasOpenWindow = true;
			window.newWindow = window.open(url,name,openOption);
		}
	}	

	function showModal(){
		window.showModalDialog("http://www.baidu.com",window,"dialogWidth:500px;dialogHeight:550px");
	}
	</script>
	<button type="button" onclick="showModal()">openModal</button>
</body>
</html>

OpenTiny社区

OpenTiny 是企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大自主核心技术为基础，加速企业应用的智能化改造。我们会在社区定期为大家分享一些前后端的技术文章。

更多推荐