[英]pop-up a window when the user clicks a button
这是我的 HTML 代码:
<p style="align-content: center">
<A style="align-content: center" HREF="newpopup.html" onClick="return popup(this, 'stevie')">my popup</A><br>
</p>
<p align="center">
<input type="button" onclick="popup(this, 'about') " value="CLICK HERE">
</p>
和 JavaScript:
function popup(mylink, windowname)
{
if (! window.focus)
return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
我的按钮“单击此处”会弹出一个窗口,但它是空的。 我希望我的按钮像上面的 URL 链接“我的弹出窗口”一样工作。
所以我想通过单击按钮在弹出窗口中打开newpopup.html
的内容。
我的弹出式 URL 链接工作正常,我希望按钮也能正常工作。
mylink
(按钮的this
)不是字符串,因此您尝试打开mylink.href
:
if (typeof(mylink) == 'string')
href = mylink;
else
href = mylink.href;
但是,按钮没有href
属性,所以就好像你写:
window.open(undefined, 'about', 'width=400,height=200,scrollbars=yes');
正如预期的那样,它会打开一个空白页面。 如果要打开与链接相同的页面,请使用:
onclick="popup('newpopup.html', 'about');"
试试这段简单的代码:
<script>
function fullwindowpopup(){
window.open("newpopup.html","bfs","fullscreen,scrollbars")
}
</script>
<center>
<form>
<input type="button" onClick="fullwindowpopup()" value="CLICK HERE">
</form>
</center>
如果您希望它们“浮动”在您的 html 页面上方,弹出窗口可能会很棘手。 这可以通过使用绝对位置在当前页面上放置“过滤器”和所需框架来获得。 通常我会做这样的事情:
HTML
<body>
...
<div class='myPopup'>
<iframe src='http://www.myurl.com' id='popup-frame'>
</iframe> <!-- /#popup-frame -->
</div> <!-- /.myPopup -->
...
</body>
CSS:
.myPopup {
position: absolute;
width: 100%;
height: 100%;
background-color: #A8A8A8;
opacity: 0.4;
display: none;
z-index: 100;
}
#popup-frame {
position: absolute;
top: 50%;
left: 50%;
}
堆栈溢出检查这个例子。
javascript
在下面
<script>
function openPopup() {
document.getElementById("boxPopup").style.display = "block";
}
function closePopup() {
document.getElementById("boxPopup").style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
var modal = document.getElementById('boxPopup');
if (event.target == modal) {
closePopup();
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.