前端，点击弹出一个新的html页面 10

前端页面，怎样实现点击"添加",弹出一个添加页面，并且之前的页面不能编辑。除了用easyUI的$("#add").window('open');以外的方法。... 前端页面，怎样实现点击"添加",弹出一个添加页面，并且之前的页面不能编辑。除了用easyUI的$("#add").window('open');以外的方法。展开

 我来答

2个回答

#热议# 为什么说不要把裤子提到肚脐眼？

Kenn
2018-03-09 · TA获得超过517个赞

知道小有建树答主

回答量：703

采纳率：82%

帮助的人：192万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<button class="open-modal">点击我以后，你就点不到我了</button>

<div class="mask" style="display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.8)"></div>
<div class="modal" style="display: none; transform: translate(-50%, -50%); left: 50%; top: 50%; position: fixed; width: 300px; height: 300px; background-color: #fff; border-radius: 10px;">
<button class="close-modal">关闭我</button>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
var mask = document.querySelector('.mask')
var modal = document.querySelector('.modal')
var open = document.querySelector('.open-modal')
var close = document.querySelector('.close-modal')
open.addEventListener('click', function(e) {
mask.style.display = 'block'
modal.style.display = 'block'
})
close.addEventListener('click', function(e) {
mask.style.display = 'none'
modal.style.display = 'none'
})
})
</script>
</body>
</html>