I want to create modal in materialize dynamically. this is my javascript code:

    $(document).ready(function(){
        var modalContainer = $('<div id="modal_id" class="modal"></div>');
        var modalContent = $('<div class="modal-content"><p>my content</p></div>');
        modalContainer.append(modalContent);

        modalContainer.modal(); // or modalContainer.modal('open');
    });

and this is my trigger button:

<a class="waves-effect waves-light btn modal-trigger" href="#modal_id">Show Modal</a>

but, this is not working. when i click to Show Modal anchor, show me the wrapper of modal and do not show modal box. please help me. thanks.

I want to create modal in materialize dynamically. this is my javascript code:

    $(document).ready(function(){
        var modalContainer = $('<div id="modal_id" class="modal"></div>');
        var modalContent = $('<div class="modal-content"><p>my content</p></div>');
        modalContainer.append(modalContent);

        modalContainer.modal(); // or modalContainer.modal('open');
    });

and this is my trigger button:

<a class="waves-effect waves-light btn modal-trigger" href="#modal_id">Show Modal</a>

but, this is not working. when i click to Show Modal anchor, show me the wrapper of modal and do not show modal box. please help me. thanks.

• javascript
• jquery
• html
• materialize

Share Improve this question Follow asked Oct 27, 2017 at 13:57 jamshidjamshid 33355 silver badges1212 bronze badges 2

• This questions answer may help you. – VTodorov Commented Oct 27, 2017 at 14:01
• @VTodorov You probably want to note that the linked question is using Twitter Bootstrap as oppose to Materialize... – War10ck Commented Oct 27, 2017 at 14:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can do it with this simple approach. Create and an empty div with .modal class and whatever the id you want to assign.

Then in jQuery, create a variable and save a div with class modal-content. In that div specify your message or content, you want to add dynamically. After that, append that variable to modal using $(.modal).append() and open your modal using .modal()

Take a look at Example

I've created a jsfiddle take a look at it.

Demo - jsFiddle

Example

HTML

<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<div id="modal1" class="modal"></div>

jQuery

$(document).ready(function(){
    
    // Here specify your content or message, enclose between <p>
    var content = '<div class="modal-content"><p>my content</p></div>';
    
    $('.modal').append(content);
    $('.modal').modal();
});

I wrote a small class to create modals dynamically. Note that setting the height and width is a bit buggy, I don't really know why. I only need fixed-footer modals in my application, but that class could easily be set dynamically to fit your needs. Anyways, I hope it helps:

class Modal {
    constructor(opt) {
        this.name = opt.name;
        this.width = opt.width || '';
        this.height = opt.height || '';
        this.topMargin = opt.height ? Math.floor((100 - this.height) / 2) : '';
        this.style = (opt.width && opt.height) ? 'width: ' + this.width + '%; height: ' + this.height + 'vh; top: ' + this.topMargin + 'vh;' : opt.width ? 'width: ' + this.width + '%;' : opt.height ? 'height: ' + this.height + 'vh; top: ' + this.topMargin + 'vh' : '';
        this.footerButtons = opt.footerButtons || '';
        this.openButton = opt.openButton || null;
        this.title = opt.title || '';
        this.onOpen = opt.onOpen;
        this.fixedContent = opt.fixedContent || '';
        this.template = '<div id="' + this.name + '" class="modal modal-fixed-footer" style="' + this.style + '"><div class="modal-content" style="padding-top: 17px;"><h4>' + this.title + '</h4><div class="divider"></div><br>' + this.fixedContent + '<div class="modal-content-dynamic"></div></div><div class="modal-footer">' + this.footerButtons + '</div></div>';
        $('.container').append(this.template);
        var self = this;
        if (this.openButton) {
            $(document).on('click', this.openButton, function () {
                self.open();
            });
        }
    }
    open() {
        $('#' + this.name).openModal({
            dismissable: false,
            preventScrolling: false
        });
        if (this.onOpen) this.onOpen(this);
    }
    close() {
        $('#' + this.name).closeModal();
    }
    setContent(content) {
        $('#' + this.name).find('.modal-content-dynamic').html(content);
    }
    addContent(content) {
        $('#' + this.name).find('.modal-content-dynamic').append(content);
    }
    setTitle(title) {
        $('#' + this.name).find('.modal-content h4').html(title);
    }
    setFooterButtons(buttons) {
        $('#' + this.name).find('.modal-footer').html(buttons);
    }
}

And then use it like this:

var testModal = new Modal({
    name: 'testModal',
    openButton: '#open_testModal',
    title: '<b>TestModal</b>',
    fixedContent: '<p>Some static content</p>',
    onOpen: function (modal) {
        // do something every time the modal is opened
    }
});

You can open the modal on 1.0.0 using pure javascript like this

const elem = document.getElementById('modalId here');
const instance = M.Modal.init(elem, {dismissible: false});
instance.open();