jquery - 如何在 Popup div 中加载 iframe 内容？

Question

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

$(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>

Answer 1

首先，您不需要在链接中使用#。只需调用 e.preventDefault(); 即可停止执行链接。

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

此外，您可能不会使用切换，因为如果框架已经打开，您总是必须单击它两次。

这是一个 working fiddle

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>

j查询

$(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");
    });
});

当然你必须在样式上做一些改变以获得更好的观看体验:)