Open VaJoy opened 8 years ago
<script>
var oOepn = document.getElementById('btn'),
oBg = document.getElementById('md-bg'),
oClose = document.getElementById('md-close');
oOepn.onclick = function(){
oBg.style.display = 'block';
}
oClose.onclick = function(){
oBg.style.display = 'none';
}
</script>
坐等昨天作业的最优解,已经想了两天了,没头绪。
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#md-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
}
#md-window{
width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
background:#fff;
}
#md-close{
display:block;
width:30px;
height:30px;
position:absolute;
left:50%;
top:50%;
margin-top:-165px;
margin-left:135px;
color:#fff;
background:darkred;
font-size:14px;
font-family:"Arial";
line-height:30px;
text-align:center;
}
window.onload = function(){
var $ = function(id){
return document.getElementById(id);
}
$("md-close").onclick = function(){
$("md-bg").style.display = "none";
}
$("btn").onclick = function(){
$("md-bg").style.display = "block";
}
}
<button id="btn">点我出来模态窗口哦</button>
<div id="md-bg" style="display:none;">
<p id="md-window">我是一个窗口内容</p>
<a id="md-close">X</a>
</div>
var btn = document.getElementById('btn');
var dialog = document.getElementById('md-bg');
var close = document.getElementById('md-close');
var closeFunc = (function(){
var flag = false;
return function() {
flag = !flag;
alert(flag)
if(flag) {
dialog.style.display = "block";
} else {
dialog.style.display = "none";
}
}
})();
close.onclick = closeFunc;
btn.onclick = closeFunc;
#md-bg {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-color: rgba(0,0,0,.5);
}
#md-window {
width: 300px;
height: 300px;
position: absolute;
top:50%;
left: 50%;
background-color: #fff;
margin-left: -150px;
margin-top: -150px;
}
#md-close {
position: absolute;
width: 30px;
height: 30px;
left:50%;
top:50%;
margin-left: 135px;
margin-top: -160px;
background-color: darkred;
text-align: center;
line-height: 30px;
font-size: 14px;
font-family: "Arial";
color: #fff;
}
var btn = document.getElementById("btn");
var popwin = document.getElementById("md-bg");
var close = document.getElementById("md-close");
btn.onclick = function() {
popwin.style.display = "block";
};
close.onclick = function() {
popwin.style.display = "none";
}
假设有一个非常简单的页面,其DOM结构如下:
请你在不改变DOM结构(不删除或新增节点)的前提下编写对应的样式和脚本,让用户点击
其中 ![](http://ww2.sinaimg.cn/mw690/5d9a559fgw1eyvpx0kh1bg20ef0bxaaz.gif)
<button>
时可以弹出一个简单的模态窗口,点击<a>
时则关闭模态窗口。 其中关于模态窗口样式要求如下图:div
的底色为黑色半透明(如果浏览器支持透明的话),<a>
的底色为 darkred。 交互效果如下:要求:
<a>
里的“X”要求字号为14px,字体为“Arial”,必须居中显示;<style>
、<script>
;<a>
加上a:hover{cursor: pointer}
的样式