?1 <!doctype html> ?2 <html> ?3 ??<head> ?4 ????<meta charset="utf-8"> ?5 ????<title>JS/CSS 注册表单（模态框设置）</title> ?6 ????<style> ?7 ????????8 input[type=email], input[type=password] { ?9 ????width: 100%; 10 ????padding: 12px 20px; 11 ????margin: 8px 0; 12 ????display: inline-block; 13 ????border: 1px solid #ccc; 14 ????box-sizing: border-box; 15 } 16 ?17 ?18 button { 19 ????background-color: #4CAF50; 20 ????color: white; 21 ????padding: 14px 20px; 22 ????margin: 8px 0; 23 ????border: none; 24 ????cursor: pointer; 25 ????width: 100%; 26 } 27 ?28 ?29 .cancelbtn { 30 ????padding: 14px 20px; 31 ????background-color: #f44336; 32 } 33 ?34 ?35 .cancelbtn,.signupbtn {float:left;width:50%} 36 ?37 ?38 .container { 39 ????padding: 16px; 40 } 41 ?42 ?43 .modal { 44 ????display: none; ?45 ????position: fixed; ?46 ????z-index: 1; ?47 ????left: 0; 48 ????top: 0; 49 ????width: 100%; ?50 ????height: 100%; ?51 ????overflow: auto; ?52 ????background-color: rgb(0,0,0); ?53 ????background-color: rgba(0,0,0,0.4); ?54 ????padding-top: 60px; 55 } 56 ?57 ?58 .modal-content { 59 ????background-color: #fefefe; 60 ????margin: 5% auto 15% auto; ?61 ????border: 1px solid #888; 62 ????width: 80%; ?63 } 64 ?65 ?66 .close { 67 ????position: absolute; 68 ????right: 35px; 69 ????top: 15px; 70 ????color: #000; 71 ????font-size: 40px; 72 ????font-weight: bold; 73 } 74 ?75 .close:hover, 76 .close:focus { 77 ????color: red; 78 ????cursor: pointer; 79 } 80 ?81 ?82 .clearfix::after { 83 ????content: ""; 84 ????clear: both; 85 ????display: table; 86 } 87 ?88 ????</style> 89 ??</head> 90 ??<body> 91 ????<h1> 92 ??????注册表单 93 ????</h1> 94 ????<button ??onclick="document.getElementById(‘mymodel‘).style.display=‘block‘"> 95 ??????注册 96 ????</button> 97 ????<h1> 98 ??????登录表单 99 ????</h1>100 ????<button ??onclick="document.getElementById(‘mymodel1‘).style.display=‘block‘">101 ??????登录102 ????</button>103 ????104 ????<div class="modal" id="mymodel">105 ??????<span onclick="document.getElementById(‘mymodel‘).style.display=‘none‘" class="close" >×</span>106 ?????<form class="modal-content animate" action="www.baidu.com">107 ??????<div class="container">108 ?????????109 ???????110 ??????<div>111 ????????<label for="myemail">邮箱</label>112 ????????<input type="email" placeholder="请输入邮箱" name="myemail">113 ????????114 ??????</div>115 ???????<div>116 ????????<label for="mypassword">密码</label>117 ????????<input type="password" placeholder="请输入密码" name="mypassword">118 ????????119 ??????</div>120 ???????<div>121 ????????<label for="repassword">确认密码</label>122 ????????<input type="password" placeholder="确认密码" name="repassword">123 ????????124 ??????</div>125 ??????<div>126 ????????<input type="checkbox" name="checked"><label for="checked">记住密码</label>127 ??????</div>128 ??????<div>129 ????????<p>130 ??????????请仔细阅读我们的<a href="#">服务条款</a>131 ????????</p>132 ??????</div>133 ??????<div class="clearfix">134 ????????<button type ="button" onclick="document.getElementById(‘mymodel‘).style.display=‘none‘" class="cancelbtn">135 ??????????取消136 ????????</button>137 ????????<button ?class="signupbtn" type="submit">138 ??????????注册139 ????????</button>140 ??????</div>141 ???????</div>142 ?????</form>143 ????</div>144 ????<!--模态框可以作为复用组件-->145 ????<div class="modal" id="mymodel1">146 ??????<span onclick="document.getElementById(‘mymodel1‘).style.display=‘none‘" class="close" >×</span>147 ?????<form class="modal-content animate" action="www.baidu.com">148 ??????<div class="container">149 ?????????150 ???????151 ??????<div>152 ????????<label for="myemail">邮箱</label>153 ????????<input type="email" placeholder="请输入邮箱" name="myemail">154 ????????155 ??????</div>156 ???????<div>157 ????????<label for="mypassword">密码</label>158 ????????<input type="password" placeholder="请输入密码" name="mypassword">159 ????????160 ??????</div>161 ??????<div>162 ????????<input type="checkbox" name="checked"><label for="checked">记住密码</label>163 ??????</div>164 ??????165 ??????<div class="clearfix">166 ????????<button type ="button" onclick="document.getElementById(‘mymodel1‘).style.display=‘none‘" class="cancelbtn">167 ??????????取消168 ????????</button>169 ????????<button ?class="signupbtn" type="submit" >170 ??????????登录171 ????????</button>172 ??????</div>173 ???????</div>174 ?????</form>175 ????</div>176 ????<script>177 ??????// 获取模型178 ????var modal = document.getElementById(‘mymodel‘);179 180 ????// 鼠标点击模型外区域关闭登录框181 ????window.onclick = function(event) {182 ??183 ??????if (event.target == modal) {184 ????????modal.style.display = "none";185 ????}186 }187 ????</script>188 ??</body>189 ??190 </html>主要是CSS美化，每次完成一个小动作时要知道心中有图，知道哪一种属性能实现什么样的效果，可以把它们封装成不同的组件，实现复用，bootstrap就是封装了一个css库。和一些配合js，html的组件，
JS /CSS 实现模态框（注册和登录组件）
原文地址：https://www.cnblogs.com/weblife/p/10271802.html