divi页面在img之前弹出答案

【问题标题】：divi page make popup before imgdivi页面在img之前弹出
【发布时间】：2020-09-16 10:44:11
【问题描述】：

我的 divi 页面中的弹出窗口有问题。

我创建了弹出窗口，然后在我的主页中实现了相同的功能，但我的弹出窗口消失了，然后我向下滚动，例如：

就像你看到我的弹出是在 img 之后。而且这看起来不太好，我想解决它。

我的代码：

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {

  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  left: 5px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}


.form-container .cancel {
  background-color: #f2835a;
}


.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">



<div class="open-button" 

<div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Patalpų dezinfekcija beta</h1>

    <h4>Patalpų dezinfekcija beta - 70ct/kv.m </h4>
  
    <h4>tel. <a href="tel:+5444565">+54645654656</a> <br>
    el. p. <a href="mailto:i546456o@456456456.com">45646@45645654.com</a> </h4>

   


    <button type="button" class="btn cancel" onclick="closeForm()">Uždaryti</button>
  </form>
  </div>
</div>



</body>
</html>

我自己找不到解决方案。请任何关于如何解决此问题的信息都会非常好。

【问题讨论】：

您提供的代码无法重现您的问题，您能否尝试在 sn-p 中重现它（在编辑问题模式下按 Ctr-m）并发布 sn-p？
我做什么。可能的固定标签弥补更多？ idk 那么我的问题在哪里。因为我使用 wordpress divi 来构建我的页面。插入这段代码是一项艰巨的任务。

标签： javascript html css wordpress

【解决方案1】：

其实我不明白你想说什么。所以请使用下面的 CSS 和 HTML 供您参考。在那里您可以将模态编辑为根据您的要求。

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/*** Html part ***/
<body>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
</body>

【讨论】：

您的代码不起作用。我使用wordpress，divi来构建我的网站设计，我的代码工作，但表格是在imgs之后，我想在之前制作，因为它看起来不太好。
@Kalakutas 其实我不明白你在期待什么。我以为你的弹出窗口有问题。这就是为什么我给你作为参考而不是确切的参考。如果您在 css 中遇到任何重叠问题，请向我展示您的输出。