gpt4 book ai didi

javascript - 在 'onclick' 事件上打开固定窗口 - javascript 和 html

转载 作者:行者123 更新时间:2023-11-27 23:44:36 24 4
gpt4 key购买 nike

我知道有一些方法可以显示一个固定在屏幕上的新窗口,而网站的另一部分将被禁用并位于黑色和透明的封面下。但是我不知道这些方法和技术的名称。所以我编写自己的代码来创建类似它们的东西。 我的问题 是,这样做的常用方法是什么?这是我的代码……

<!DOCTYPE HTML>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="bg_cover">
</div>
<div id="inside_box">
</div>
<div>
<form>
<label>
<input type="button" value="run" onclick="sign_go()">
</label>
</form>
</div>
<script>
function sign_go() {
document.getElementById('bg_cover').style='z-index:80; background-color:#003399; position:fixed; top:0; left:0; height:100%; width:100%; opacity:0.5;';
document.getElementById('inside_box').style='z-index:90; background-color:white; position:fixed; left:0; right:0; height:100px; width:300px; margin:auto; margin-top:100px;';
document.getElementById('inside_box').innerHTML='<form><label><input type="text"><input type="button" onclick="sign_back()"></label></form>';
}
function sign_back(){
document.getElementById('bg_cover').style='';
document.getElementById('inside_box').style='';
document.getElementById('inside_box').innerHTML='';
}
</script>
</html>

最佳答案

首先,您需要一个固定的元素来覆盖整个页面,并且透明且具有更高的 z-index 和 display: none;,内容将进入内部。所以它看起来像:

<div id="center_container">
<div id="center">
<div>Some content</div>
<span id="close_center">X</span>
</div>
</div>

#center 将在此处保存内容,#center_container 仅覆盖页面。

#center_container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: rgba(128, 128, 128, 0.5); /* transparency */
z-index: 20;
}
#center {
position: relative;
margin: 50px auto;
border-radius: 10px;
}
#close_center {
position: absolute;
top: -10px;
right: -10px;
cursor: pointer;
}

然后在按钮上单击您显示它并设置关闭按钮以关闭它。

jsfiddle DEMO

关于javascript - 在 'onclick' 事件上打开固定窗口 - javascript 和 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30468814/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com