Modal: how to destroy?

[jerry1970]

Hi,

To generate different modals (some action buttons require confirmation or input), I build a DOM element (div id="mymodal") in JS and show that using UIkit.modal("#mymodal").

When I want to open another modal from another action button, the contents are the same as from the first time I opened the modal.

I guess I could check for existance of "#mymodal" and replace the contents, but if I could destroy the UIkit.modal and rebuild it, that would be so much easier.

Can this be done?

Thanks,
Jerry

[malles]

The content of the modal is taken from the modal that is in the DOM. Calling UIkit.modal("#mymodal").show() will open the modal with that ID and Content. If you call UIkit.modal("#mymodal2").show(), another modal with other content will open. If you want to use the same modal for different content, you'd have to change the content via JS.

var modal = UIkit.modal("#mymodal");
modal.find('.uk-modal-dialog').html('<p>New content.</p>');
modal.show();

[jerry1970]

Thanks. I assume that UIkit's modal makes a copy then? I change the contents of '#mymodal' and then call UIkit.modal("#mymodal") again and the old contents show up.

[malles]

No, it doesn't create/clone anything in the dom. Only alert/confirm create their own modal.

This works for me, I think this is what you need:
http://codepen.io/malles/pen/dodwwW

var modal = UI.modal($('#my-id'), {bgClose: false}),
        modalContent = modal.find('.modal-content');
    $('#modal1').click(function () {
      modalContent.html('<p>Content modal 1</p>');
      modal.show();
    });
    $('#modal2').click(function () {
      modalContent.html('<p>Different content modal 2</p>');
      modal.show();
    });

[jerry1970]

But modal1 and modal2 are static. Try adding a form field to the html. The second time I opened the modal (while even recreating the html including the form field) did not change, the value was the same as the previous time I opened it.

I'll try and add a code sample when I am back home.

[jerry1970]

Ah, I see the difference. I have a single template (piece of html) for modals. It has an ID that does not change. See this example I use for adding buttons to a markdown editor to help our writers.

<div class="uk-modal" id="our-modal">
    <div class="uk-modal-dialog">
        <button type="button" class="uk-modal-close uk-close"></button>
        <div class="uk-modal-header our-modal-header">
            <h3></h3>
        </div>
        <div class="our-modal-content"></div>
        <div class="uk-modal-footer our-modal-buttons uk-text-right">
            <button type="button" class="uk-button">Cancel</button> 
            <button type="button" class="uk-button uk-button-primary">Save</button>
        </div>
    </div>
</div>

This template is not in the DOM when no modal is used, the JS adds it to the DOM as soon as the first modal is requested.

Action buttons that add text to an editor all use the same modal but they need different modal contents. The first button shows the modal with an explanation and two text fields for a text and a URL, to add TEXT to the text area. All buttons ask for different things.

So I am changing the template (source of the modal) and then call this:

UIkit.modal('#our-modal').show();

And although I changed the contents of the template, the old contents were shown.

I solved it by $("#our-modal").remove(); before opening the next one. So I am not destroying the modal but the original DOM element.

[malles]

If you replace the content of your JS-template, you'd have to inject that template again into the modal.
Try to replace the DOM of the modal itself, like I did.
Anyway, any solution works.

[lukehutton]

+1 for this conversation, 2 hours of seeing same modal when same id, or when modal not appearing on 1st click when setting id (from angular scope)

[rvalitov]

Had the same problem with AngularJS. The solution is to remove the modal from DOM manually.

[Speuta]

Had the same problem with AngularJS.
Resolved by using class instead of id to select my container.

$scope.$on('$destroy', function(){
    UIkit.modal('.my-modal').$destroy(true);
});

[jsiwek11]

Happening in Angular2 still.

When triggered, the modal element is moved to just before the closing body tag. Works fine while using the compnent, but if user routes to a different component, and then comes back, the modal is appended to the DOM again when clicked.

My workaround is to listen for the ActivationStart Router event and manually remove the modal element from the DOM just before navigating away.

[rvalitov]

@jsiwek11 This was a very old issue that happened when using old Uikit with old Angular. What version of Uikit do you use with Angular 2? In my modern projects where I used Angular 12+ and Uikit 3 I didn't face this issue.

[jsiwek11]

Thanks, you're right, I probably should have opened a new issue.

It is an old project that I recently resurrected & updated. It originally used v2, but currently running Angular 15.1.4 & uikit@3.16.10 installed.

Once I'm finished with this sprint, I'll set up a fresh Angular project and try to reproduce a few of these issues I've found in my project.