在其他页面打开jQuery Fancybox



我有一个链接在页index.html,我需要打开一个div位于另一个页面称为index2.html,但我不能这样做。

我的代码是:

index.html中的链接

<a href="#modal" id="open-modal">Open Modal</a> 

index2.html页面内容:

    <div id="modal" class="style-modal">                  
        <a id="close_modal" href="#" title="close modal"></a>
        <div id="content-modal">
          <p>Content here</p>
        </div>                  
    </div>
这是我的代码在effect .js:

   $(document).ready(function(){
        $("#open_modal").click(function(){
            $( '#modal' ).fadeIn();
            $( '#bg-modal' ).fadeTo( 500, .5 );
         });
        $("#close_modal").click(function(){
            $( '#modal, #bg-modal' ).fadeOut();
        });
    });

请帮帮我。

尝试使用window.location.hash:

index.html中的链接:

<a href="http://example.com/index2.html#show-modal" id="open-modal">Open Modal</a>

index2.html页面内容:

<div id="modal" class="style-modal">                  
    <a id="close_modal" href="#" title="close modal"></a>
    <div id="content-modal">
      <p>Content here</p>
    </div>                  
</div>
这是我的代码在effect .js:

function showModal() {
    $( '#modal' ).fadeIn();
    $( '#bg-modal' ).fadeTo( 500, .5 );
}
$(document).ready(function(){
        $("#open_modal").on('click', showModal);
        $("#close_modal").click(function(){
            $( '#modal, #bg-modal' ).fadeOut();
        });
        if (window.location.hash == '#show-modal') {
            showModal();
        }
    });

如果你试图从另一个页面加载一个div到模态,尝试使用AJAX,像这样:
小提琴: http://jsfiddle.net/hwVrN/1/
:

<a href="#modal" id="open-modal">Open Modal</a> 
<div id="modal-container">
</div>

JS

$(document).ready(function(){
        $("#open-modal").click(function(){
            $('#modal-container').load('index2.html',function(){ 
                $( '#modal' ).fadeIn();
                $( '#bg-modal' ).fadeTo( 500, .5 );
            });
         });
        $("#close-modal").click(function(){
            $( '#modal, #bg-modal' ).fadeOut();
        });
    });

最新更新