CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modal
user3446501
user3446501

Reputation: 31

Bootstrap Modal doesn't display

I working bootstrap recent version. I created a bootstrap modal dynamically. I gave modelLink href value give to fade_div ID. But it does not show the modal when i click the link button. Please any one tell solution for my problem. The below code i wrote for Bootstrap Modal.

    var modelLink = document.createElement('a');
    modelLink.setAttribute('role', 'button');
    modelLink.setAttribute('data-toggle', 'modal');
    modelLink.className = "btn btn-primary btn-sm";
    modelLink.innerHTML = "Display";
    modelLink.href = '#myModal';
    divElementGroup1.appendChild(modelLink);

    var file_list;
    var fade_div;
    jQuery(modelLink).on('click', function() {
        jQuery("#myModal").modal("show");
    });

    var fade_div = document.createElement('div');
    fade_div.className = "modal fade";
    fade_div.id = "myModal";
    fade_div.setAttribute('tabindex', '-1');
    fade_div.setAttribute('role', 'dialog');
    fade_div.setAttribute('aria-labelledby', 'myModalLabel');
    fade_div.setAttribute('aria-hidden', 'true');

    var model_dialog = document.createElement('div');
    fade_div.appendChild(model_dialog);
    var model_content = document.createElement('div');
    model_dialog.appendChild(model_content);

    var model_header_div = document.createElement('div');
    model_header_div.className = "model-header";
    model_content.appendChild(model_header_div);

    var top_right_close_button = document.createElement('button');
    top_right_close_button.className = "close";
    top_right_close_button.setAttribute('data-dismiss', 'modal');
    top_right_close_button.setAttribute('aria-hidden', 'true');
    top_right_close_button.innerHTML = "X";
    model_header_div.appendChild(top_right_close_button);

    var model_body = document.createElement('div');
    model_body.className = "model-body";
    model_content.appendChild(model_body);


    var model_footer_div = document.createElement('div');
    model_footer_div.className = "modal-footer";
    model_content.appendChild(model_footer_div);

    var close_button = document.createElement('button');
    close_button.className = "btn";
    close_button.setAttribute('data-dismiss', 'modal');
    close_button.setAttribute('aria-hidden', 'true');
    close_button.innerHTML = "Close";
    model_footer_div.appendChild(close_button);

Thanks in Advance.

Upvotes: 2

Views: 665

Answers (1)

isherwood
isherwood

Reputation: 61056

Because you're creating your link dynamically you'll need to use event delegation:

var modelLink = document.createElement('a');

jQuery(document).on('click', modelLink, function() {
    jQuery("#myModal").modal("show");
});

Upvotes: 2

Related Questions