打开外部链接作为叠加在同一页面上 [英] Open external link as an overlay on the same page
问题描述
不透明度:0.6
这是一个外部的index.html(带有CSS,JS和img文件夹)。
当我在外部页面上点击链接时,我想打开index.html。因此,该页面只覆盖了黑色覆盖图和滑块。
我必须使用淡入淡出的iframe来做到这一点吗?所以就像:
$(document).ready(function(){
$('#mylink a') .click(function(){
var iframeSrc = $(this).attr('href');
$('#myiFrame')。fadeOut(1000,function(){
$('#myiFrame iframe')。attr('src',iframeSrc);
$('#myiFrame')。fadeIn(1000);
});
return false;
});
});
或者有没有更简单的解决方案?小问题是我必须只能在HTML编辑器中编写文本,因为我在那里打开滑块的链接位于带有HTML编辑器的CMS中。
解决方案如果我得到了正确的答案 -
function openNav(){document.getElementById(myNav)。style.width =100%;} function closeNav(){document.getElementById(myNav)。style.width = 0%;}
body {margin:0; font-family:'Lato',sans-serif;}。overlay {height:100%;宽度:0;位置:固定; z-index:1; top:0;左:0; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.9); overflow-x:hidden; transition:0.5s;}。overlay-content {position:relative;顶部:25%;宽度:100%; text-align:center; margin-top:30px;}。覆盖{padding:8px;文字修饰:无; font-size:36px;颜色:#818181;显示:块; overlay a:hover,.overlay a:focus {color:#f1f1f1;}。overlay .closebtn {position:absolute;}过渡:0.3s;}。 top:20px;右:45px; font-size:60px;} @ media screen和(max-height:450px){.overlay a {font-size:20px} .overlay .closebtn {font-size:40px; top:15px;右:35px; }}
< div id =myNavclass = 重叠 > < a href =javascript:void(0)class =closebtnonclick =closeNav()>& times;< / a> < div class =overlay-content> < iframe src =http://www.w3schools.com/>< / iframe> < / div>< / div>< span style =font-size:30px; cursor:pointeronclick =openNav()>&#9776;开放< /跨度>
I got a little slider with a black background with
opacity: 0.6
This is an external index.html (with a CSS, JS and img folder).
I'd like to open that index.html when i hit a link on an external page. So the page is just covered with that black overlay and the slider.
Do I have to do this with an iframe, which fades in? So like:
$(document).ready(function () { $('#mylink a').click(function(){ var iframeSrc = $(this).attr('href'); $('#myiFrame').fadeOut(1000,function(){ $('#myiFrame iframe').attr('src',iframeSrc); $('#myiFrame').fadeIn(1000); }); return false; }); });
Or is there any easier solution? The little problem is that I have to be able to write the text in a HTML-editor only, because where I got that link to open the slider is in a CMS with a HTML-Editor.
解决方案If I got u correctly-
function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; }
body { margin: 0; font-family: 'Lato', sans-serif; } .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } }
<div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <iframe src="http://www.w3schools.com/"></iframe> </div> </div> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
这篇关于打开外部链接作为叠加在同一页面上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!