Как создать простое всплывающее окно с простым HTML, CSS и JavaScript?

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) В вашем правиле CSS для "contactPopup" в начале отсутствовал # для обозначения идентификатора элемента.

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. Я также заставил всплывающее окно выглядеть немного лучше в целом с некоторыми закругленными углами и более мягким шрифтом и цветами.