Bootstrap show.bs.modal event real example code

The show.bs.modal event fires immediately when the show instance method is called means this event works when the modal is about to be displayed. The code executed in the call back method of show.bs.modal event will perform first then the modal will be displayed.

Answers 1
  • Remove text from element in modal on show.bs.modal event

    <button type="button" class="btn btn-success"> Open Modal  </button>
    <div class="modal fade" id="myModal">
    	<div class="modal-dialog modal-dialog-centered" role="document">
    		<div class="modal-content">
    		    <div class="modal-body">
                    <div id="response">  Lorem ipsum text </div>  
    		    </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> 
    <script>
        $(document).ready(function(){
            $('button').on('click', function(){
                $('#myModal').modal('show');
            });
            $('#myModal').on('show.bs.modal', function () {
                $(this).find('#response').empty();
                $(this).find('.form-control').removeClass('is-invalid');
            });
        })
    </script>
    
    0

    This code snippet will empty or remove text from invalid-feedback element and remove is-invalid class from form-control before showing the login modal 

  • Back to code snippet queries related bootstrap