js打开和关闭弹窗

示例：

html代码：

<div id="cover" class="cover" style="display:none;z-index: 2147483640; top: 0px; left: 0px; position: fixed; height: 100%; width: 100%; opacity: 0.5; background-color: rgb(0, 0, 0);"></div>
<div id="idBox" class="lightbox" style="display:none;z-index: 2147483647; max-width: 450px; margin-left: -225px; margin-top: -197.5px;">
<div id="boxMain">
<div id="boxTopTitle">
<span id="boxName">产品意向单</span>
<span id="boxClose" title="关闭">×</span>
       </div>
        <div id="boxContent">
<div id='show_order' class='pro_order'>
<form method='post' action='/gbook.asp?action=add'>
<table id="GBForm" class="gform">
<tr>
<td colspan="2" align='center' id='pInfo' height="70px">
<div class="productName">提交购买音乐团队组建 意向</div>
</td>
</tr>
<tr>
<td class="text" align="right">联系人</td>
<td class="left"><input name="Contact" required type="text" class="txt"></td>
</tr>
<tr>
<td class="text" align="right">联系电话</td>
<td class="left"><input name="ContactWay" type="text" required class="txt"></td>
</tr>
<tr>
<td class="text" align="right">详细信息</td>
<td class="left"><textarea name="Content" required class="textarea"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="add" value="提交意向" id="GBbt" class="gbt" ></td>
</tr></table>
        <input type="hidden" name="FaqTitle" value="无">
</form>
</div></div></div></div>


JS代码：

<script>
// 获取弹窗
var modal = document.getElementById('idBox');
 
// 打开弹窗的按钮对象
var btn = document.getElementById("myBtn");
 
// 获取 <span> 元素，用于关闭弹窗
var span = document.querySelector('.boxClose');
 
// 点击按钮打开弹窗
myBtn.onclick = function() {
    modal.style.display = "block";
    cover.style.display = "block";
}
 
// 点击 <span> (x), 关闭弹窗
boxClose.onclick = function() {
    modal.style.display = "none";
    cover.style.display = "none";
}
</script>