Add Bootstrap Modal using JavaScript and Cloned Node

Question

I am attempting to add a modal to a page after the page has load via a button click (in the below I did it on document ready instead of a click). The modal is created by cloning another modal and then appending the clone to the DOM. The modal node appears in the DOM but the modal does not open when giving it .modal() commands. I have created a simple codepen that shows my code and will show it below.

Codepen: https://codepen.io/anon/pen/YxQrZG

HTML:

<div id="LocalModalArea">
    <div class="modal fade" id="exampleModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                  <div id="myModalLabel" class="sideLineHeader">
                    <h2><span>Modal Header</span></h2>  
                  </div>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

JS:

 $("Document").ready(function () {
   var newModal = $("#exampleModel").clone(true, true);
   newModal.attr("id", "NewModelId")
   $('#LocalModalArea').append(newModal)
   $("#NewModelId").modal("show")
 });

On your codepen you haven't added jQuery which is required by bootstrap, if jQuery added it seems to be working jsbin.com/pamiqac/edit?html,js,output — azs06
– azs06, Commented Aug 10, 2017 at 20:27
In my Code-pen example adjusting the sequence of my bootstrap and jquery script solved this issue. In my actual project I adjust where the scripts were being called and that resolved my issue. @azs06 If you make a answer suggesting to change the order my scripts are posted I will check it as the answer. — nejohannsen
– nejohannsen, Commented Aug 14, 2017 at 15:26
@azs06 If you make a answer suggesting to change the order my scripts are posted I will check it as the answer. — nejohannsen
– nejohannsen, Commented Aug 14, 2017 at 15:31

azs06 · Accepted Answer · 2017-08-14 15:49:20Z

On your codepen you haven't added jQuery which is required by bootstrap.

 $("Document").ready(function () {
   var newModal = $("#exampleModel").clone(false, true);
   newModal.attr("id", "NewModelId")
   $('#LocalModalArea').append(newModal);
   $("#NewModelId").addClass('super-red');
   $("#NewModelId").modal("show")
 });

.super-red{
	background-color: darkred;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="LocalModalArea">
    <div class="modal fade" id="exampleModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                  <div id="myModalLabel" class="sideLineHeader">
                    <h2><span>Modal Header</span></h2>  
                  </div>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>	
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

Note, I added additional css to highlight cloned element.

Collectives™ on Stack Overflow

Add Bootstrap Modal using JavaScript and Cloned Node

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related