回覆列表
-
1 # 蘑菇頭MTV
相關內容
- 用HTML、CSS和JavaScript寫移動應用，有哪些值得推薦的框架、工具或者庫？
- 什麼技術取代當前的Div +CSS+ JavaScript？
- 適合有一定HTML和CSS基礎的Javascript入門書籍有哪些？
- 學JavaScript需要css和HTML的基礎嗎？
- HTML、CSS、JavaScript、PHP、MySQL的學習順序是什麼？
- 只會javascript和css和html可以找工作嗎？
- 程式設計了一年多，什麼都會一點但都不精通，該怎麼提升？
- 計算機程式設計師為什麼不直接使用css作為控制程式碼，為何使用艱澀難懂的javascript呢？
- 前端學了HTML css javascript，下一步應該學什麼？
這個簡單，給你一段簡單的示例程式碼，你可以參考下：
html+css部分：JavaScript部分：執行效果程式碼也給你放上來，你自己複製過去執行看效果吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模態對話方塊demo</title>
<style type="text/css">
body,html{margin: 0px;padding: 0px;}
div.dialog{width: 500px;height: 300px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;
background:white;top: 50%;margin-left: -250px;left: 50%;margin-top: -150px;position: relative;box-sizing: border-box;}
#container{width: 100%;height: 100%;position: fixed;filter: alpha(opacity=50);
background-color: rgba(0,0,0,.5);left: 0px;top: 0px;display: none;}
#close_btn{font: bold 28px/30px "microsoft yahei";color: darkgrey;float:right;margin-right: 5px;cursor: pointer;}
#open_diaog{border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;height: 50px;width: 150px;border: 0px;
background: deepskyblue;font: bold 6px/21px "microsoft yahei";cursor: pointer;}
</style>
</head>
<body>
<button>開啟模態對話方塊</button>
<div>
<div>
<span>×</span>
<h1>我是模態對話方塊</h1>
</div>
</div>
<script type="text/javascript">
(function(){
var close_btn = document.querySelector("#close_btn");
var open_diaog = document.querySelector("#open_diaog")
close_btn.onmousemove = function(){
this.style.color = "red";
}
close_btn.onmouseout = function(){
this.style.color = "darkgrey";
}
close_btn.onclick = function(){
document.querySelector("#container").style.display = "none";
}
open_diaog.onclick = function(){
document.querySelector("#container").style.display = "block";
}
}())
</script>
</body>
</html>