Javascript 如何创建动态Uikit模式[Joomla]

我想有一个模式，只改变内容。在模态im中，通过iframe显示文章。问题是，我的解决方案有点滞后，您可以在更改之前查看前一篇文章。即时通讯使用JS：

  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>

我的问题是：如何通过Jquery创建modal，并且只添加和删除DOM。链接到页面：

---

通过单击“Informacje”，您将看到问题所在。

我自己找到了解决方案：）我没有使用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');
        }

var$jq=jQuery.noConflict（）；
$jq（文档）。在（'click'，'info'，打开'info'模式）。在（'click'，'zapytaj'，打开'ask'模式）；
功能打开信息模式（e）
{
var articleId=$jq（e.target）.data（'id'）；
var articleTitle=$jq（e.target）.data（'title'）；
$jq（“#modal”）.on({
'uk.modal.show'：函数（）{
$jq（'#title'，$jq（this））.html（''+articletTitle+''）；
$jq（'span'，$jq（this））.html（''；
},
'uk.modal.hide'：函数（）{
}
}).trigger（'uk.modal.show'）；
}
功能打开\询问\模式（e）
{
var articleTitle=$jq（e.target）.data（'title'）；
$jq（“#modal”）.on({
'uk.modal.show'：函数（）{
$jq（'#title'，$jq（this））.html（''+articletTitle+''）；
$jq（'span'，$jq（this））.html（''；
},
在这里输入代码'uk.modal.hide'：function（）{
}
}).trigger（'uk.modal.show'）；
}

我自己找到了解决方案：）我没有使用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');
        }

var$jq=jQuery.noConflict（）；
$jq（文档）。在（'click'，'info'，打开'info'模式）。在（'click'，'zapytaj'，打开'ask'模式）；
功能打开信息模式（e）
{
var articleId=$jq（e.target）.data（'id'）；
var articleTitle=$jq（e.target）.data（'title'）；
$jq（“#modal”）.on({
'uk.modal.show'：函数（）{
$jq（'#title'，$jq（this））.html（''+articletTitle+''）；
$jq（'span'，$jq（this））.html（''；
},
'uk.modal.hide'：函数（）{
}
}).trigger（'uk.modal.show'）；
}
功能打开\询问\模式（e）
{
var articleTitle=$jq（e.target）.data（'title'）；
$jq（“#modal”）.on({
'uk.modal.show'：函数（）{
$jq（'#title'，$jq（this））.html（''+articletTitle+''）；
$jq（'span'，$jq（this））.html（''；
},
在这里输入代码'uk.modal.hide'：function（）{
}
}).trigger（'uk.modal.show'）；
}