Question

我正在尝试执行叠加功能。

my $dbh = MongoDB::MongoClient->connect(host => 'localhost', port => 27017);

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按钮。

请在此建议我。

提前致谢。

Answer 1

在功能

之后将其添加到您的JavaScript中

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

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

Answer 2

替代选项可以使用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();
}

Fiddle

Javascript叠加功能

2 个答案: