在用CSS模拟alert时，显示位置的问题

leetow2006 2019-05-30 09:44:21

我用css来模拟alert,请看：
<html>
<head>
<style>
.alert{
width: 30%;
position: fixed;
top: 30%;
left: 0;
right: 0;
margin: auto;
padding: 50px;
box-sizing: border-box;
background: #fcfcfc;
border-radius: 4px;
box-shadow: 0 0 4px;
text-align: center;
display: none;
}
.mask{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
position: fixed;
top: 0;
left: 0;
display: none;
}
</style>
<script>
function Simulate_alert(msg)
{
var alert = document.getElementById('alert');
var mask = document.getElementById('mask');
alert.innerHTML =msg;
alert.style.display = 'block';
mask.style.display = 'block';
setTimeout(function() {
alert.style.display = 'none';
mask.style.display = 'none';
}, 2000);
}
</script>
</head>

<body>
<div class="mask" id="mask"></div>
<div class="alert" id="alert"></div>
<button id="myBtn" onclick="clickme('hello')">click</button>
</body>
</html>

这个文件单独保存为html，我可以运行的，现在我想把这个应用在自己的程序中，我是这样做的：
把前面的CSS定义保存在一个单独的css文件，然后把函数clickme(msg)存放在本html文件中，然后
在<body>后插入两行：
<div class="mask" id="mask"></div>
<div class="alert" id="alert"></div>
之后是我原来的代码：
<div align="center">
<p class="STYLE1">插入加盟店信息</p>
</div>

<form id="form1" name="form1" method="post" action="/cater/input/insstore.php">
<p class="STYLE2">加盟店名称
<input name="uname" type="text" id="uname" onblur="this.value=Sw(this.value)" />
</p>
.....
可是在调用该Simulate_alert函数时，并没有在网页中间显示字符串，也没有变成半透明，而
只是在网页的最上面显示字符串，请问：是不是我的div的位置有错？如果要想在网页中间显
示字符串，并变成半透明，我该怎么写？

...全文

279 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

leetow2006 2019-06-01

打赏
举报

可以了，要把CSS中的选择器设置为ID选择器，可能是因为我在html文件中，我的div是这样的：
<div id="mask"></div>
<div id="alert"></div>
我原来是用类选择器

leetow2006 2019-05-31

打赏
举报

还有个问题：我想把获取div的变量设置为全局的，
var alert = document.getElementById('alert');
var mask = document.getElementById('mask');
这两句放在函数的外部，可是在函数内不能使用
这两个变量，请问：这样设置全局变量不行吗？

leetow2006 2019-05-31

打赏
举报

有引入：<link rel="stylesheet" type="text/css" href="/cater/cater.css">
我这个cater.css在目录cater下，并且css中的其他标记可以被正确使用，就是
这个不行，不知道为什么

天际的海浪 2019-05-31

打赏
举报

引用 6 楼 leetow2006 的回复:

还有个问题：我想把获取div的变量设置为全局的， var alert = document.getElementById('alert'); var mask = document.getElementById('mask'); 这两句放在函数的外部，可是在函数内不能使用这两个变量，请问：这样设置全局变量不行吗？

在全局环境下的代码是在页面加载阶段从上到下一边加载一边执行的，这时处于代码下面的页面元素还没有加载完，访问不到。要把script放在页面body下面才可以。另外全局变量名最好不要用 alert 。这样会覆盖掉 window.alert() 方法。导致别的地方使用alert()方法出错。

天际的海浪 2019-05-31