Javascript覆盖函数

Javascript overlay function

本文关键字：函数 覆盖 Javascript      更新时间：2023-09-26

我正在尝试执行覆盖功能。

function toggleOverlay(){
	var overlay = document.getElementById('overlay');
	var specialBox = document.getElementById('specialBox');
	overlay.style.opacity = .8;
	if(overlay.style.display == "block"){
		overlay.style.display = "none";
		specialBox.style.display = "none";
	} else {
		overlay.style.display = "block";
		specialBox.style.display = "block";
	}
}
div#overlay {
	display: none;
	z-index: 2;
	background: #000;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	text-align: center;
}
div#specialBox {
	display: none;
	position: relative;
	z-index: 3;
	margin: 150px auto 0px auto;
	width: 500px; 
	height: 300px;
	background: #FFF;
	color: #000;
}
div#wrapper {
	position:absolute;
	top: 0px;
	left: 0px;
	padding-left:24px;
}
<div id="overlay"></div>
<div id="specialBox">
  <p>Special box content ...</p> 
  <button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<div id="wrapper">
 
  <button onmousedown="toggleOverlay()">Apply Overlay</button>
</div>

在当前函数中，当我单击Apply overlay按钮时，弹出窗口即将出现。但是根据我的要求，当我执行脚本时必须弹出，即不调用apply overlay按钮。

请就此建议我。

提前谢谢。

在函数之后将其添加到您的 JavaScript 中

window.onload = function(){ 
  toggleOverlay()
}

这将在加载页面时调用函数

可以使用替代选项self-invokling function 

var publicObj = {}; 
(
  publicObj.toggle = function togglefunction() {
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if (overlay.style.display == "block") {
      overlay.style.display = "none";
      specialBox.style.display = "none";
    } else {
      overlay.style.display = "block";
      specialBox.style.display = "block";
    }
  })(publicObj);
function toggleOverlay(){
  publicObj.toggle();
}

小提琴

相关文章：