在我的弹出式灯箱中添加外部链接
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在我的弹出式灯箱中添加外部链接相关的知识,希望对你有一定的参考价值。
在我的网站上,我想在一个框架中显示谷歌网站,但这是我的错误:拒绝在框架中显示,因为它将'X-Frame-Options'设置为'SAMEORIGIN'
所以我想在弹出灯箱中显示链接,但不知道我该怎么做!!这是我的弹出灯箱代码:
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow", 0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function(e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
});
#mask {
position: absolute;
left: 0;
top: 0px;
width: 100% !important;
height: 750px !important;
z-index: 9000;
background-color: #fff;
display: none;
}
#boxes .window {
position: absolute;
left: 0!important;
top: 0px!important;
width: 100%;
height: 750px;
display: none;
z-index: 9999;
padding: 20px;
text-align: center;
}
#boxes #dialog {
left: 0!important;
top: 0px!important;
width: 100%;
height: 750px;
padding: 10px;
background-color: #ccc;
font-family: 'Segoe UI Light', sans-serif;
font-size: 15pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div id="dialog" class="window">
Your Content Goes Here
</div>
<div id="mask"></div>
</div>
需要添加更多文本以有效我的帖子,但所有人都说!!
答案
您可以使用<iframe>
显示外部URL中的内容。这不适用于每个URL,因为有些人会设置X-Frame-Options
来禁止在<iframe>
中嵌入页面。基本上,您将#dialog
的html设置为<iframe>
,并将src
设置为您要显示的URL,例如:
$(id).html(`<iframe src="https://www.theonion.com/" frameborder="0" width="100%" height="100%" ></iframe>`);
这是一个例子:
$(document).ready(function() {
var id = '#dialog';
$(id).html(`<iframe src="https://www.theonion.com/" frameborder="0" width="100%" height="100%" ></iframe>`);
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow", 0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function(e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
});
#mask {
position: absolute;
left: 0;
top: 0px;
width: 100% !important;
height: 750px !important;
z-index: 9000;
background-color: #fff;
display: none;
}
#boxes .window {
position: absolute;
left: 0!important;
top: 0px!important;
width: 100%;
height: 750px;
display: none;
z-index: 9999;
padding: 20px;
text-align: center;
}
#boxes #dialog {
left: 0!important;
top: 0px!important;
width: 100%;
height: 750px;
padding: 10px;
background-color: #ccc;
font-family: 'Segoe UI Light', sans-serif;
font-size: 15pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div id="dialog" class="window">
</div>
<div id="mask"></div>
</div>
以上是关于在我的弹出式灯箱中添加外部链接的主要内容,如果未能解决你的问题,请参考以下文章