October 22, 2024
Chicago 12, Melborne City, USA
HTML

Bootstrap 3 Modal stop to work after dom updates


I have this HTML (using Bootstrap 3):

    <div class="container">
        <h2>Bootstrap 3 Modal Example</h2>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <form id="myForm">
                            <div class="form-group">
                                <label for="name">Name:</label>
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                        </form>
      
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="divText">
    </div>
    </div>

and this JavaScript:

    $(document).ready(function(){
            $('#saveBtn').click(function(){

$('body').append('<div id="spinner" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;font-size:5em;color:#000;"><i class="fa fa-spinner fa-spin"></i></div>');

$('#divText').html("<p>Hello world</p>")
                
                 $('#myModal').modal('hide');
                
            });
        });

If I press Save the modal stop to work (the close button not work and also modal(‘hide’) not work).

Can you help me? you can test it using jsfiddle and using on CSS:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css');

Thanks



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video