Bootstrap show.bs.modal event real example code

Updated at 23-Aug-2021, By samar

Bootstrap show.bs.modal event real example code

We will use programming in this lesson to attempt to solve the "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.
  • 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>
    

    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