2016-09-15 11 views
0

私はモーダルを1つ持ちたいと思います。モーダルでは、iframeで記事を表示しています。問題は私のソリューションが少し遅れていることです。変更する前に前の記事を見ることができます。イム使用してJS:動的なUikitモーダルを作成するには

function switchTitleMod1(title,id) { 
    document.getElementById("titleMod1").innerHTML = title; 
    document.getElementById("iframe").src = "index.php?option=com_content&view=article&id="+id+"&tmpl=component"; 
    } 

モーダルコード:

<div id="informacje" class="uk-modal"> 
    <div class="uk-modal-dialog" > 
    <a onclick="resetTitleMod1();" class="uk-modal-close uk-close"></a> 
    <div id="titleMod1" class="uk-modal-header uk-text-bold uk-text-large uk-text-center"><h2>Zapisz si? na kurs</h2></div> 
    <iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id="34"&tmpl=component" hspace="0"> 
    </iframe> 
    <div class="uk-modal-caption">Copyright by MRP-KODER</div> 

これは私がモーダルを呼び出す方法です:

<a onclick="switchTitleMod1('Szkolenia HACCP','42');" href="#informacje" data-uk-modal="{target:'#informacje',bgclose:false,center:true}" class="uk-button uk-button-medium uk-button-primary">     <i class="uk-icon-info uk-icon-justify"></i>Informacje</a> 

私の質問です:jQueryの経由モーダルを作成する方法と、 DOMを削除するだけです。ページへのリンク:link "Informacje"をクリックすると、問題の内容が表示されます。

答えて

0

自分で解決策を見つけました:)私はDOMモデルを使用しませんでしたが、ボタンのIDを変更するだけで異なるモダールを使用すると問題なく動作します。

var $jq = jQuery.noConflict(); 
     $jq(document).on('click', '#info', open_info_modal).on('click', '#zapytaj', open_ask_modal); 
     function open_info_modal(e) 
     { 
      var articleId = $jq(e.target).data('id'); 
      var articleTitle = $jq(e.target).data('title'); 
      $jq('#modal').on({ 
       'uk.modal.show':function(){ 
         $jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>'); 
        $jq('span', $jq(this)).html('<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id='+articleId+'&tmpl=component" hspace="0">'); 
       }, 
       'uk.modal.hide':function(){ 

       } 
      }).trigger('uk.modal.show'); 
     } 
     function open_ask_modal(e) 
     { 
      var articleTitle = $jq(e.target).data('title'); 
      $jq('#modal').on({ 
       'uk.modal.show':function(){ 
         $jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>'); 
        $jq('span', $jq(this)).html('<iframe id="iframe2"style="width: 100%;height:600px" scrolling="auto" frameborder="0" src="index.php?option=com_chronoforms5&chronoform=zapytaj-szkolenie&tmpl=component&name1='+articleTitle+'" hspace="0">'); 
       }, 
       enter code here'uk.modal.hide':function(){ 

       } 
      }).trigger('uk.modal.show'); 
     } 
関連する問題