弹出指定位置

我正在关注this W3Schools page以创建模式弹出窗口。下面的代码是从原始页面复制的。弹出指定位置

HTML：

<input id="myInputTextBox" /> 

<!-- 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>

风格：

/* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    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/Box */ 
.modal-content { 
    background-color: #fefefe; 
    margin: 15% auto; /* 15% from the top and centered */ 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; /* Could be more or less, depending on screen size */ 
} 

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

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

的Javascript：

// 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 on 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"; 
    } 
}

我怎么能这个弹出位置的正下方或myInputTextBox以上，这取决于可用空间视口？请注意，我需要能够处理模式上的点击事件，这样，如果点击发生在模型内容之外，我将关闭弹出窗口。

来源

2017-09-19 synergetic

你想用JS或CSS做呢？ – Tomer

你能为此创建一个小提琴吗？ –

css或js无论如何欢迎，但更喜欢js。 – synergetic

这里是一个基于CSS的解决方案：

// 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"; 
 
      } 
 
     }

.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%; 
 
      left: 8px; 
 
      position: absolute; 
 
      top: 90px; 
 
     } 
 
     /* 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; 
 
     }

<h2>Modal Example</h2> 
 

 
    <div><input id="myInputTextBox" /></div> 
 

 
    <!-- 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>

https://jsfiddle.net/6esv2vsy/

来源

2017-09-19 09:02:22

您可以将modal这样。

请检查我的小提琴。 :)

Move modal position

.modal-content{ 
    position = absolute; 
    margin = auto; 
    left = (your x) px; 
    top = (your y) px; 
}

来源

2017-09-19 09:47:53

弹出指定位置

回答

相关问题