Question

我想在主页中弹出一个“联系表”，并且我希望该联系表应该在灯箱中。我已经成功地在主页中显示了联系表。但是我没有灯箱背景。我想要在弹出窗口后面获得灰色背景。有人可以帮助我吗？

window.addEventListener("load", popupContact, true);

function popupContact() {
  setTimeout(popup, 3000);
}

function popup() {
  document.getElementById("popupBackground").style.display = "block";
  document.getElementById("popupBackground").style.width = 500 px;
  document.getElementById("popupBackground").style.height = 500 px;
  document.getElementById("contactPopup").style.display = "block";
}

#popupBackground {
  display: block;
  background-color: blue;
  z-index: 1000;
}

contactPopup {
  display: none;
  position: absolute;
  top: 250px;
}

<div id="popupBackground">
  <h1>this is 3987</h1>
</div>

<div id="contactPopup">
  <h2>Contact Us</h2>
  <form action="https://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);" target="_top">
    <table border="0" cellpadding="5" cellspacing="0" width="600">
      <tr>
        <td><b>Name*:</b></td>
        <td><input name="Name" type="text" maxlength="60" style="width:350px;" /></td>
      </tr>
      <tr>
        <td><b>Phone number:</b></td>
        <td><input name="PhoneNumber" type="text" maxlength="43" style="width:350px;" /></td>
      </tr>
      <tr>
        <td><b>Email address*:</b></td>
        <td><input name="FromEmailAddress" type="text" maxlength="60" style="width:350px;" /></td>
      </tr>
      <tr>
        <td><b>Comments and questions*:</b></td>
        <td><textarea name="Comments" rows="7" cols="40" style="width:350px;"></textarea></td>
      </tr>
      <table>
  </form>
</div>

Answer 1

您的原始代码有两个问题：

1）它由于语法错误而崩溃。两次写500 px的地方都应该是"500px"。

2）您的“ contactPopup”的CSS规则一开始缺少表示元素ID的#。

3）我不确定单独的“ popupBackground”区域的用途是什么。它既不覆盖弹出窗口后面的区域，也不将其设置为灰色（或灰色）颜色。而且您也不需要单独的背景元素，只需直接设置contactPopup元素的样式即可。

这是一个演示：

window.addEventListener("load", popupContact, true);

function popupContact() {
  setTimeout(popup, 3000);
}

function popup() {
  document.getElementById("contactPopup").style.display = "block";
}

#contactPopup {
  display: none;
  background-color: #dddddd;
  padding: 5px 10px;
  border-radius: 5px;
  font-family: sans-serif;
  color: #121212;
  font-size: 0.9em;
}

input[type="text"],
textarea {
  border: 1px solid #cccccc;
  border-radius: 3px;
  width: 350px;
}

table {
  width: 600px;
  border-collapse: collapse;
  border: none;
}

th {
  text-align: left;
  vertical-align: top;
}

th,
td {
  padding: 5px;
}

<div id="contactPopup">
  <h2>Contact Us</h2>
  <form action="https://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);" target="_top">
    <table>
      <tr>
        <th>Name*</th>
        <td><input name="Name" type="text" maxlength="60" /></td>
      </tr>
      <tr>
        <th>Phone number</th>
        <td><input name="PhoneNumber" type="text" maxlength="43" /></td>
      </tr>
      <tr>
        <th>Email address*</th>
        <td><input name="FromEmailAddress" type="text" maxlength="60" /></td>
      </tr>
      <tr>
        <th>Comments and questions</th>
        <td><textarea name="Comments" rows="7" cols="40"></textarea></td>
      </tr>
      <table>
  </form>
</div>

您还具有一些已过时的元素属性（例如，在表上），应将其替换为CSS，并将元素上的某些内联样式替换为主CSS块中的条目。我还通过一些圆角和较柔和的字体和颜色使弹出窗口总体上看起来更好一些。

如何使用简单的html，css和javascript生成简单的弹出框？

1 个答案: