如何在Popup div中加载iframe内容？ [英] How to Load iframe content in Popup div?

问题描述

如何在Popup div中加载iframe内容。
popup div会在每个链接的每个链接
点击打开，页面url将加载到弹出窗口div中的iframe href。

How to Load iframe content in Popup div. popup div will be open on click of each link from each link, page url will load to iframe href inside popup div.

$(document).ready(function(){
  $(".openpop").click(function(){
    var x =    $(this).attr('href');
    alert(x);
    y =  x.replace('#', '');
    alert(y);
    $(".popup").toggle();
    $("iframe").attr("href", y);

  });

   $(".close").click(function(){
     $(this).parent().fadeOut("slow");
  }); 

});

HTML

<a class="openpop" href="#http://www.google.com">Link 1</a>
<a class="openpop" href="#http://www.yahoo.com">Link 2</a>
<a class="openpop" href="#http://www.w3schools.com">Link 3</a>
<div class="wrapper">
<div class="popup">
<iframe src="">
  <p>Your browser does not support iframes.</p>
</iframe>
<a href="#" class="close">X</a></div>
</div>

推荐答案

首先，您不需要＃链接。只需调用 e.preventDefault（）; 即可停止执行链接。

First, you don't need # in the link. Just call e.preventDefault(); to stop the link from executing.

出于安全原因，您不能打开每个链接，例如。 google。

For security reasons you can't open every link eg. google.

你也可以不使用切换，因为如果一帧已经打开，你必须点击两次。

Also you might not use toggle because you allways have to click it twice if a frame is opend already.

这是 工作小提琴

here is a working fiddle

html

html

<div class="links">
    <a class="openpop" href="http://getbootstrap.com/">Link 1</a>
    <a class="openpop" href="http://www.jsfiddle.net">Link 2</a>
    <a class="openpop" href="http://www.w3schools.com">Link 3</a>
</div>
<div class="wrapper">
    <div class="popup">
        <iframe src="">
            <p>Your browser does not support iframes.</p>
        </iframe>
<a href="#" class="close">X</a>
    </div>
</div>

jquery

$(document).ready(function () {
    $(".popup").hide();
    $(".openpop").click(function (e) {
        e.preventDefault();
        $("iframe").attr("src", $(this).attr('href'));
        $(".links").fadeOut('slow');
        $(".popup").fadeIn('slow');
    });

    $(".close").click(function () {
        $(this).parent().fadeOut("slow");
        $(".links").fadeIn("slow");
    });
});

当然，您必须对样式进行一些更改以获得更好的视觉体验：）

of course you have to do some changes in styling for better view experience :)

这篇关于如何在Popup div中加载iframe内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！