页面加载时自动将href分配给div

Question

我有html代码

<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
  <div class="popup">
    <h2>Here i am</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
        Thank to pop me out of that button, but now i'm done so you can
    </div>
  </div>
</div>

我要在页面加载时显示弹出窗口。 等我点击按钮时。 如何用javascript或jquery制作？ 我在这里找到的这个例子

Answer 1

请使用onload功能。

的HTML

<body onload="load()">
    <div id="popup"> 
       <div id="popUPAlert" style="display:none;">
          //Model content
       </div>
    </div>
</body>

Java脚本

function load(){
    document.getElementById('popUPAlert').style.display="block";
}

Answer 2

尝试此操作，您希望您的弹出窗口最初被隐藏。 然后，在加载内容时，您需要将弹出窗口的display属性设置为block

的CSS

#popup1 {
    display: none;
}

JS

window.onload = function () {
    document.getElementById("popup1").style.display = "block";
};

Answer 3

https://codepen.io/anon/pen/EbMBqE

设置`location.href`

window.onload = function() {
  console.log("load");
  location.href = "#popup1";
};

 window.onload = function() { console.log("load"); location.href = "#popup1"; };

 body { font-family: Arial, sans-serif; background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat; background-size: cover; height: 100vh; } h1 { text-align: center; font-family: Tahoma, Arial, sans-serif; color: #06D85F; margin: 80px 0; } .box { width: 40%; margin: 0 auto; background: rgba(255,255,255,0.2); padding: 35px; border: 2px solid #fff; border-radius: 20px/50px; background-clip: padding-box; text-align: center; } .button { font-size: 1em; padding: 10px; color: #fff; border: 2px solid #06D85F; border-radius: 20px/50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; } .button:hover { background: #06D85F; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } }

 <h1>Popup/Modal Windows without JavaScript</h1> <div class="box"> <a class="button" href="#popup1">Let me Pop up</a> </div> <div id="popup1" class="overlay"> <div class="popup"> <h2>Here i am</h2> <a class="close" href="#">&times;</a> <div class="content"> Thank to pop me out of that button, but now i'm done so you can close this window. </div> </div> </div>

Answer 4

用这个：

window.onload = function() {
  yourFunction(url);
};

function yourFunction(url) {
    newwindow=window.open(url,'name','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
}

在html中，您还可以编写：

<a href="popupex.html" onclick="return yourFunction('popupex.html')"
    >Link to popup</a>

页面加载时自动将href分配给div

问题描述

4 个解决方案

解决方案1
1 已采纳 2017-12-05 07:14:19

解决方案2
0 2017-12-05 07:00:14

解决方案3
0 2017-12-05 07:15:49

设置`location.href`

解决方案4
-2 2017-12-05 06:52:51

页面加载时自动将href分配给div

问题描述

4 个解决方案

解决方案1 1 已采纳 2017-12-05 07:14:19

解决方案2 0 2017-12-05 07:00:14

解决方案3 0 2017-12-05 07:15:49

设置location.href

解决方案4 -2 2017-12-05 06:52:51

解决方案1
1 已采纳 2017-12-05 07:14:19

解决方案2
0 2017-12-05 07:00:14

解决方案3
0 2017-12-05 07:15:49

设置`location.href`

解决方案4
-2 2017-12-05 06:52:51