如何解决奇怪的<div>叠加行为？

时间：2019-04-23 16:26:00

标签： javascript html css overlay

我想在网站上显示联系人弹出窗口。我添加了所有必要的代码。当我单击链接时，弹出窗口会很好地打开，但是第一，它会移动背景，第二，即使我在css中指定，它的高度也不会达到100％。

@import url('https://fonts.googleapis.com/css?family=Lato:400,500');
* {
  margin: 0 0 0 0;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background-image: url('https://images.unsplash.com/photo-1527100673774-cce25eafaf7f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80');
  background-size: fit 100%;
  background-position: center, top;
  background-repeat: no-repeat;
  color: white;
}

section {
  height: 100%;
}

h1 {
  margin-bottom: 7px;
}

h2 {
  font-weight: 300;
  margin-top: 7px;
  margin-bottom: 21px;
}

.v-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#hero {
  margin-left: 15px;
  z-index: 1;
}

#hero-social {
  margin-left: 15px;
  float: left;
  z-index: 1;
}

.button {
  font-size: 12pt;
  background-color: rgba(255, 255, 255, 0.1);
  display: inline-block;
  padding: 0.35em 1.2em;
  border: 0.1em solid #FFFFFF;
  margin: 0 0.3em 0.3em 0;
  border-radius: 0.3em;
  box-sizing: border-box;
  color: #FFFFFF;
  text-align: center;
  transition: all 0.2s;
}

.button:hover {
  color: #000000;
  background-color: #FFFFFF;
}

hr {
  border: 2px solid white;
  border-radius: 5px;
}

/* The popup form - hidden by default */

.form-popup {
  display: none;
  z-index: 2;
  height: 100%;
}

.form-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  margin: 0 0 0 0;
}

.form-container input {
  width: 60%;
  padding: 15px;
  border: none;
  background: white;
  border-radius: 0.3em;
  margin-bottom: 14px;
}

.form-container textarea {
  width: 60%;
  padding: 15px;
  border: none;
  background: white;
  border-radius: 0.3em;
  margin-bottom: 14px;
  height: 150px;
}

.form-container .button {
  background-color: rgba(0, 0, 0, 0.1);
  display: inline-block;
  padding: 0.35em 1.2em;
  border: 0.1em solid white;
  margin: 0 0.3em 0.3em 0;
  border-radius: 0.3em;
  box-sizing: border-box;
  color: white;
  text-align: center;
  transition: all 0.2s;
}

.form-container .button:hover {
  color: #000000;
  background-color: #FFFFFF;
}

/* DEVICE CONFIGURATION */

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 41pt;
    padding-bottom: 10px;
  }
  h2 {
    font-size: 13pt;
  }
  .button {
    font-size: 13pt;
    width: 47%;
  }
  hr {
    display: none;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
  h1 {
    font-size: 43pt;
  }
  h2 {
    font-size: 13pt;
  }
  .button {
    font-size: 12pt;
  }
}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 45pt;
  }
  h2 {
    font-size: 13pt;
  }
  .button {
    font-size: 12pt;
  }
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  h1 {
    font-size: 50pt;
  }
  h2 {
    font-size: 15pt;
  }
  .button {
    font-size: 12pt;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  h1 {
    font-size: 60pt;
  }
  h2 {
    font-size: 18pt;
  }
  .button {
    font-size: 13pt;
  }
}
<!doctype html>
<html lang="en">

  <head>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <title>Daniel W.</title>
    <script type="js">function openForm() { document.getElementById("contact").style.display = "block"; } function closeForm() { document.getElementById("contact").style.display = "none"; }
    </script>
  </head>

  <body>
    <div class="v-center">
      <section id="hero">
        <div id="hero">
          <h1>Daniel W.</h1>
          <hr>
          <h2>Just an odd photographer from Hanover with some vintage preferences</h2>
        </div>
        <div id=hero-social>
          <a href="https://www.instagram.com/dawoj2019/" target="blank"><button class="button"><i class="fab fa-instagram"></i> Instagram</button></a>
          <a href="https://unsplash.com/@dawoj2018/" target="blank"><button class="button"> <i class="fas fa-camera"></i> unsplash</button></a>
          <a href="#works"><button class="button"><i class="far fa-images"></i></i> references</button></a>
          <button class="button" onclick="openForm()"><i class="far fa-envelope"></i> Message</button>
        </div>
    </div>
    </section>
    <section id=works>

    </section>
    <div class="form-popup" id="contact">
      <form action="/action_page.php" class="form-container">
        <label for="name">Name*</label>
        <br>
        <input type="text" name="name" required>
        <br>

        <label for="email">Email*</label>
        <br>
        <input type="text" name="email" required>
        <br>

        <label for="subject">Subject*</label>
        <br>
        <input type="text" name="subject" required>
        <br>

        <label for="message">Message*</label><br>
        <textarea id="message" name="message"></textarea><br>

        <button type="submit" value="submit" class="button">SUBMIT</button>
        <!--<button type="submit" class="btn cancel" onclick="closeForm()">Close</button>-->
      </form>
    </div>
  </body>

</html>

关于：

<button class="button" onclick="openForm()"><i class="far fa-envelope"></i> Message</button>

1 个答案:

答案 0 :(得分：1)

喜欢吗？

function openForm() { document.getElementById("contact").style.display = "block"; } function closeForm() { document.getElementById("contact").style.display = "none"; }
@import url('https://fonts.googleapis.com/css?family=Lato:400,500');
* {
  margin: 0 0 0 0;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background-image: url('https://images.unsplash.com/photo-1527100673774-cce25eafaf7f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80');
  background-size: fit 100%;
  background-position: center, top;
  background-repeat: no-repeat;
  color: white;
}

section {
  height: 100%;
}

h1 {
  margin-bottom: 7px;
}

h2 {
  font-weight: 300;
  margin-top: 7px;
  margin-bottom: 21px;
}

.v-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 10px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#hero {
  margin-left: 15px;
  z-index: 1;
}

#hero-social {
  margin-left: 15px;
  float: left;
  z-index: 1;
}

.button {
  font-size: 12pt;
  background-color: rgba(255, 255, 255, 0.1);
  display: inline-block;
  padding: 0.35em 1.2em;
  border: 0.1em solid #FFFFFF;
  margin: 0 0.3em 0.3em 0;
  border-radius: 0.3em;
  box-sizing: border-box;
  color: #FFFFFF;
  text-align: center;
  transition: all 0.2s;
}

.button:hover {
  color: #000000;
  background-color: #FFFFFF;
}

hr {
  border: 2px solid white;
  border-radius: 5px;
}

/* The popup form - hidden by default */

.form-popup {
  display: none;
  z-index: 2;
position: absolute;
width: 100%;
min-height:100vh;
max-width:100vw;
text-align:center;
top:0;
left:0;
}

.form-container {
  width: 100%;
  height: 100%;
  min-height:100vh;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  margin: 0 0 0 0;
}

.form-container input {
  width: 60%;
  padding: 15px;
  border: none;
  background: white;
  border-radius: 0.3em;
  margin-bottom: 14px;
}

.form-container textarea {
  width: 60%;
  padding: 15px;
  border: none;
  background: white;
  border-radius: 0.3em;
  margin-bottom: 14px;
  height: 150px;
}

.form-container .button {
  background-color: rgba(0, 0, 0, 0.1);
  display: inline-block;
  padding: 0.35em 1.2em;
  border: 0.1em solid white;
  margin: 0 0.3em 0.3em 0;
  border-radius: 0.3em;
  box-sizing: border-box;
  color: white;
  text-align: center;
  transition: all 0.2s;
}

.form-container .button:hover {
  color: #000000;
  background-color: #FFFFFF;
}


/* DEVICE CONFIGURATION */

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 41pt;
    padding-bottom: 10px;
  }
  h2 {
    font-size: 13pt;
  }
  .button {
    font-size: 13pt;
    width: 47%;
  }
  hr {
    display: none;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
  h1 {
    font-size: 43pt;
  }
  h2 {
    font-size: 13pt;
  }
  .button {
    font-size: 12pt;
  }
}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 45pt;
  }
  h2 {
    font-size: 13pt;
  }
  .button {
    font-size: 12pt;
  }
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  h1 {
    font-size: 50pt;
  }
  h2 {
    font-size: 15pt;
  }
  .button {
    font-size: 12pt;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  h1 {
    font-size: 60pt;
  }
  h2 {
    font-size: 18pt;
  }
  .button {
    font-size: 13pt;
  }
}
<!doctype html>
<html lang="en">

  <head>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <title>Daniel W.</title>
  </head>

  <body>
    <div class="v-center">
      <section id="hero">
        <div id="hero">
          <h1>Daniel W.</h1>
          <hr>
          <h2>Just an odd photographer from Hanover with some vintage preferences</h2>
        </div>
        <div id=hero-social>
          <a href="https://www.instagram.com/dawoj2019/" target="blank"><button class="button"><i class="fab fa-instagram"></i> Instagram</button></a>
          <a href="https://unsplash.com/@dawoj2018/" target="blank"><button class="button"> <i class="fas fa-camera"></i> unsplash</button></a>
          <a href="#works"><button class="button"><i class="far fa-images"></i></i> references</button></a>
          <button class="button" onclick="openForm()"><i class="far fa-envelope"></i> Message</button>
        </div>
    </div>
    </section>
    <section id=works>

    </section>
    <div class="form-popup" id="contact">
      <form action="/action_page.php" class="form-container">
        <label for="name">Name*</label>
        <br>
        <input type="text" name="name" required>
        <br>

        <label for="email">Email*</label>
        <br>
        <input type="text" name="email" required>
        <br>

        <label for="subject">Subject*</label>
        <br>
        <input type="text" name="subject" required>
        <br>

        <label for="message">Message*</label><br>
        <textarea id="message" name="message"></textarea><br>

        <button type="submit" value="submit" class="button">SUBMIT</button>
        <!--<button type="submit" class="btn cancel" onclick="closeForm()">Close</button>-->
      </form>
    </div>
  </body>

</html>

相关问题
最新问题