您现在的位置是:首页 >>JsJs

js打开和关闭弹窗

zhang2019-12-09 15:49:39【Js】人已围观

简介:
示例:html代码:<div id="cover" class="cover" style="display:none;z-index: 2147483640; top: 0px; left:...

示例:

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>


上一篇:js关闭div

下一篇:网页自动跳转

文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:98篇文章
  • 微信交流:扫描二维码,添加我
在线客服
在线客服
在线咨询:
点击这里给我发消息技术交流
点击这里给我发消息技术交流
点击这里给我发消息技术交流
电话咨询:
(微信同步)
15629136039
微信公众号