燈箱開放html

我想使用lightbox打開一個窗體，窗體本身是另一個頁面中使用的html。燈箱開放html

問題是我試過ShadowBox，它打開一個iframe，我的大部分變量在這個過程中都丟失了。我試過Lightbox5，我似乎無法找到代碼傳入一個HTML。

有什麼建議嗎？

我做了這樣的事情與太極拳

<a rel="shadowbox[MyStuff]" href="survey.html">survey</a>

它將解析了在元素傳遞是一個HTML，但它會在iframe打開從而失去了變數，我有這個頁面

加入整個樣本代碼

<html> 

<head> 
    <!-- the shadowbox stylesheet and js --> 
    <link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" 
    media="screen" /> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="jquery.lightbox-0.5.js"></script> 
    <script type="text/javascript"> 
     $(document) 
      .ready(function() 
     { 
      // Use this example, or... 
      $('a[@rel*=lightbox]') 
       .lightBox(); // Select all links that contains lightbox in the attribute rel 
      // This, or... 
      $('#gallery a') 
       .lightBox(); // Select all links in object with gallery ID 
      $('#somehiddendiv div') 
       .lightBox(); // Select all links in object with gallery ID 
      // This, or... 
      $('a.lightbox') 
       .lightBox(); // Select all links with lightbox class 
      // This, or... 
      $('a') 
       .lightBox(); // Select all links in the page 
      // ... The possibility are many. Use your creative or choose one in the examples above 
     }); 
     $(function() 
     { 
      $.ajax(
      { 
       url: 'survey.html', 
       dataType: 'html', 
       success: function (data) 
       { 
        $('#somehiddendiv') 
         .html(data); 
       } 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <!-- <a href="egypt.jpg"><img src="download.jpg" width="72" height="72" alt="" /></a> 
--> 
    <div id="somehiddendiv"></div>

</body>

來源

2012-10-04 jonleech

使用ajax調用獲取其他頁面並在正確的事件中填充燈箱？ – Johan

對不起，我不太明白你在說什麼。 – jonleech

新增示例 – Johan

您還可以使用fancybox插件爲同一目的

$(document).ready(function() { 

    /* This is basic - uses default settings */ 

    $("a#single_image").fancybox(); 

    /* Using custom settings */ 

    $("a#inline").fancybox({ 
     'hideOnContentClick': true 
    }); 

    /* Apply fancybox to multiple items */ 

    $("a.group").fancybox({ 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : false 
    }); 

});

來源

2012-10-04 09:20:46 Anshu

我讀過fancybox也在iframe中打開html。 – jonleech

$(function(){ 

    $.ajax({ 
     url: 'yourotherhtmlpage.html', 
     dataType: 'html', 
     success: function(data){ 
      $('#somehiddendiv').html(data); 
     } 
    }); 
});

然後添加一個鏈接或任何打開的窗口燈箱股利。或者通過代碼打開它。

來源

2012-10-04 09:21:58 Johan

對不起，我是jquery和所有新手。所以我在pastebin中添加了什麼我可以添加鏈接？ – jonleech

@jonleech看起來不像fancybox支持div彈出窗口，只有iamges。嘗試使用此代碼的fancybox – Johan

回答

相關問題