Fatal编程技术网
  • javascript/
  • Javascript 加载页面时自动href到div

Javascript 加载页面时自动href到div

javascript jquery html css

Javascript 加载页面时自动href到div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有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&g

我有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的弹出/模式窗口
我来了
谢谢你把我从按钮上拿出来，但现在我已经完成了，你可以了
我想弹出窗口显示页面加载时。当我点击按钮时没有等待。如何使用javascript或jquery进行编辑？我在

中找到的这个示例使用以下内容：

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>
试试这个，你会希望你的弹出窗口最初是隐藏的。然后，当加载内容时，您需要将弹出窗口的
display
属性设置为
block

CSS

JS

请使用onload函数

HTML

设置
location.href
window.onload=function（）{
控制台日志（“加载”）；
location.href=“#popup1”；
};

正文{
字体系列：Arial，无衬线；
背景：url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg)不重复；
背景尺寸：封面；
高度：100vh；
}
h1{
文本对齐：居中；
字体系列：Tahoma，Arial，无衬线；
颜色：#06D85F；
利润率：80px0；
}
.盒子{
宽度：40%；
保证金：0自动；
背景：rgba（255255,0.2）；
填充：35px；
边框：2倍实心#fff；
边界半径：20px/50px；
背景剪辑：填充框；
文本对齐：居中；
}
.按钮{
字号：1em；
填充：10px；
颜色：#fff；
边框：2个实心#06D85F；
边界半径：20px/50px；
文字装饰：无；
光标：指针；
过渡：所有0.3秒放松；
}
.按钮：悬停{
背景#06D85F；
}
.覆盖{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
过渡：不透明度500ms；
可见性：隐藏；
不透明度：0；
}
.覆盖：目标{
能见度：可见；
不透明度：1；
}
.弹出窗口{
利润率：70像素自动；
填充：20px；
背景：#fff；
边界半径：5px；
宽度：30%；
位置：相对位置；
过渡：所有5s易于输入输出；
}
.弹出窗口h2{
边际上限：0；
颜色：#333；
字体系列：Tahoma，Arial，无衬线；
}
.弹出.关闭{
位置：绝对位置；
顶部：20px；
右：30px；
过渡：所有200ms；
字体大小：30px；
字体大小：粗体；
文字装饰：无；
颜色：#333；
}
.弹出.关闭：悬停{
颜色：#06D85F；
}
.popup.content{
最高高度：30%；
溢出：自动；
}
@媒体屏幕和屏幕（最大宽度：700px）{
.盒子{
宽度：70%；
}
.弹出窗口{
宽度：70%；
}
}


不带JavaScript的弹出/模式窗口
我来了
谢谢你把我从按钮上弹出，但是现在我已经完成了，所以你可以关闭这个窗口。

最初保留CSS属性
显示：无，
onClick
do
display:block可能的重复：在你的函数中写一些代码（函数）需要选择性地描述

#popup1 {
    display: none;
}



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



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



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



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