2016-04-18 34 views
2

商品情報のポップアップを表示しているウェブサイトで作業しています。ポップアップの内側には、出荷情報の2番目のポップアップを開くリンクがあります。magnificopopup(ajax)のコンテンツを新しいajaxコンテンツに置き換える方法

私たちが望むのは、2番目のリンクがクリックされたときにポップアップコンテンツを置き換えることです。

これは可能ですか?

これは私がこれまでに(運)をしようとされていないものです。..

// first popup 
$('.pop-ajax').magnificPopup({ 
     type: 'ajax', 
     closeBtnInside: true, // put close button on inside 

     callbacks: { 
      parseAjax: function(mfpResponse) { 
       mfpResponse.data = $(mfpResponse.data).find('.l-main'); 
      }, 
      ajaxContentAdded: function() { 
       // console.log('it works'); 
      } 
     } 
}); 

// Second popup (loads first popup when a link inside is clicked) 
$('.pop-product').magnificPopup({ 
    type: 'ajax', 
    closeBtnInside: true, // put close button on inside 

    callbacks: { 
     parseAjax: function(mfpResponse) { 
      mfpResponse.data = $(mfpResponse.data).find('#product-ajax'); 
     }, 
     ajaxContentAdded: function() { 
      console.log('First popup'); 
      // var mfp = $.magnificPopup.instance; 
      //  mfpContentContainer = mfp.contentContainer; 
      //  mfpContent = mfp.content; 


      $('.pop-ajax').click(function(){ 
       $('.pop-product').magnificPopup('close'); 
       $('.pop-ajax').magnificPopup({ 
        type: 'ajax', 
        closeBtnInside: true, // put close button on inside 

        callbacks: { 
         parseAjax: function(mfpResponse) { 
          mfpResponse.data = $(mfpResponse.data).find('.l-main'); 
         }, 
         ajaxContentAdded: function() { 
          // console.log('it works'); 
         } 
        } 
       }); 
      }); 
     } 
    } 
}); 

第二のポップアップがサイト上の大きなコンテンツ領域です。このエリア内のリンクの1つに.pop-ajaxクラスのリンクがあります。しかし、ポップアップコンテンツを新しいコンテンツで更新または置換することはできません。

私がここで間違っていることについて誰でも光を当てることができますか?

答えて

0

あなたはネストされたポップアップを作成しようとしていますか?このリンクに従って、これは許可されていません。 Issues for Simultaneous Popups

しかし、あなたは内側リンクをクリックした後だけポップアップの内容を交換するだけで1つのポップアップを開きたい場合。次に、以下のリンクを参照してください。 Nested Popups

$('.first-popup-link, .second-popup-link').magnificPopup({ closeBtnInside:true}); 

上記のコードでは、同じmagnificPopupインスタンスが作成された二つの異なるリンクのためのものを見つけることができます。

関連する問題