Bartosz Lipiński Bartosz Lipiński - 2 months ago 25
CSS Question

How to create dynamic Uikit modal [Joomla]

I want to have one modal, only with content changing. In modal im showing articles via iframe. The problem is that my solution is a bit laggy, and you can see previous article before changing. Im using 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";
}


The modal code:

<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>




This is how i call the modal:

<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>


My question is: How to create modal via Jquery and only adding deleting DOM. Link to the page: link
Via clicking "Informacje" You will see what the problem is.

Answer

I found solution by myself :) I didint use DOM model, but it works fine, for using diffrent modals only by changing button 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');
        }