Problems associated with the Bootstrap modal box

Posted by wrwilson on Mon, 11 May 2020 20:39:47 +0200

1. Close the bootstrap modal box by adding a click event to the button above it
This will cause the modal box to disappear, but the mask behind the modal box remains on the page, and it took a while to find out that you want to add an attribute data-dismiss="modal" to the button without adding additional click events.

$("#cancel").click(function (){
    $("#faultInfoModal").hide();
});
<div id="faultInfoModal" class="modal fade tips-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">System Tips:</h4>
                    </div>
                    <div id="modalDeatils" class="modal-body">

                    </div>
                    <div class="modal-footer">
                         <button id="cancel" type="button" class="btn btn-primary">Determine</button>
                    </div>
                </div>
            </div>
        </div>

2. Keyboard response events for forms on modal boxes
Previously, I was troubled with keyboard response events on a modal box for a long time in a project because I always used the OK button to bind keyboard return events, but later I found out that this was not the case. Instead of binding buttons directly to keyboard events, the function that binds form input boxes to keyboard events and responds to button clicks within the bound events should be used.There is a problem with forbidding carriage return to trigger form submission before binding

/*
 * Disable carriage return triggering form submission
 */
$(document).keydown(function(event){   
    if (event.keyCode == 13) {     
        $('form').each(function() {       
            event.preventDefault();     
        });  
    }
});
/*
 * Bind a carriage return event in the specified input box
 */
$("#passWord").keydown(function(e){
    if(e.keyCode==13){
        $("#confirmBtn").click();
        event.preventDefault();
    }
});
<!-- Password Verification Modal Box start -->
        <div id="passwordConfirm" class="modal fade tips-modal  password-confirm" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">System Tips:</h4>
                    </div>
                    <div id="confirmDetails" class="modal-body">
                        <div id="tipsAgain" class="tips-again">

                        </div>
                        <form>
                          <div class="form-group">
                            <label id="dealInfo" for="recipient-name" class="control-label deal-info"></label>
                            <input id="passWord" type="password" class="form-control" placeholder="Please enter your password..." />
                          </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <h1 id="confirmTxt"></h1>
                        <button id="confirmBtn" type="button" class="btn btn-primary">Determine</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Password Verification Modal Box end -->

Topics: Attribute