ajax表单提交后Bootstrap模式没有关闭

Question

I have a page with a modal that submits courses registered by students. After successful submission, the modal closes but it leaves a faded background. I have tried possible solutions seen here on StackOverflow but none is working for me. I know this question is a duplicate of another, but it paints a different scenario.

This is my modal form

<div class="modal fade" id="regModal" role="dialog" aria-hidden="true" tabindex="-1" style="z-index:10000;">

   <div class="modal-dialog modal-md">
    <div class="modal-content">
        <div class="modal-header">
            <h5 style="margin-bottom:0;text-align:center;">Course Registration</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
        </div>
            <div class="modal-body">
                <form class="#" style="" id="form" method="POST" action="#">
                    <div class="container-fluid-div" style="">
                        <div class="row-div" style="">
                            
                            <div class="colx9" style="">
                            <?php
                                $sql = "SELECT CourseCode, CourseTitle FROM admintbl WHERE Level = ? EXCEPT SELECT CourseCode, CourseTitle FROM cregtbl WHERE Level = ? AND RegNo = ?";
                                    if ($stmt = $con->prepare($sql)){
                                    $stmt->bind_param("sss", $pLevel1, $pLevel2, $pregno);
                                    $pLevel1 = $_SESSION['level'];
                                    $pLevel2 = $_SESSION['level'];
                                    $pregno = $_SESSION['regno'];
                                    $stmt->execute();
                                    $result = $stmt->get_result();
                                    $num_rows = $result->num_rows;
                                    if ($num_rows > 0){
                                        $cbIndex = 1;
                                        while($row = $result->fetch_assoc()){
                                            $c_code = $row['CourseCode'];
                                            $c_title = $row['CourseTitle'];
                                            ?>
                                            <label class="chkLabel" style=""> <?php echo $cbIndex;?>. <?php echo $c_code;?> - <?php echo $c_title;?> <input style="" type="checkbox" class="inChk" name="inChk[]" id="inChk" value="<?php echo $c_code;?>"></input></label>
                                            <?php
                                            $cbIndex++;
                                        }
                                    }
                                    else{
                                        echo "<p style='color:darkblue;'>Oops! Seems you've registered all courses. No more courses available.</p>";
                                    }
                                }
                            ?>
                            </div>
                        <div style="width:100%;margin:0;margin-top:10px;text-align:right;">
                        <button class="btn btn-md btn-primary" id="submit" type="submit" name="submit" style="width:100%;" value="" >Register</button>
                    </div>
                </div>
            </div>
        </form>      
    </div>
    <div class="modal-footer" style="text-align:left;">
        <button type="button" class="btn btn-default" id="close" style="float:left;background:lightgrey;color:#000;" data-dismiss="modal" aria-label="Close">Close</button>
    </div>
    </div>
</div>

My ajax submit

<!--AJAX PROCESS TO SUBMIT CHECKED COURSES-->
<script type="text/javascript">
    $(document).ready(function(){
        loadNewCourse();
        loadDelTable();

        $('#submit').click(function(){
            $("#form").submit(function(e){ 
            e.preventDefault();
                    $.ajax({
                    url: 'cos_reg.php',
                    type: 'POST',
                    cache: false,
                    async: false,
                    data: $(this).serialize(),
                    success: function(data){
                        loadNewCourse();
                        loadDelTable();
                        $( '#regModal' ).modal('hide');
                        swal({
                            // "Success", "Registration successful", "success"
                            position: "top-end",
                            type: "success",
                            title: "Registration successful",
                            showConfirmButton: false,
                            timer: 2000
                        })
                    },
                    error: function(data){
                        swal("Oops...", "Registration failed.", "error");
                    }
                });
            });
        });
       function loadNewCourse(){
            $.ajax({
                url: 'processReg.php',
                type: 'POST',
                cache: false,
                async: false,
                data: {
                    loadit: 1
                },
                success: function(disp){
                    $("#reveal").html(disp).show();
                }
            });
        }
        
        function loadDelTable(){
            $.ajax({
                url: 'delete_tbl.php',
                type: 'POST',
                cache: false,
                async: false,
                data: {
                    loadDel: 1
                },
                success: function(deldisp){
                    $("#showRegtbl").html(deldisp).show();
                }
            });
        }
    });

My HTML here

    <!-- Page Content -->
    <div id="page-content-wrapper" class="animated fadeInLef" style="margin-bottom:5%;width:100%">
        <div style="background:#273640;width:100%;margin-top:px;padding:0.5rem;"><center>
            <a class="regh4" style="display:inline-block;margin-bottom:0px;width:auto;text-decoration:none;"><h5 class="#" style="font-family: 'proxima-nova','Helvetica Neue',Helvetica,arial,sans-serif;font-weight:normal;letter-spacing:5px;color:#fff;margin-top:5px;"><i class="fas fa-pen-square"></i> Course Registration Form</h5></a>
        </center></div><br>
           <!--Display Courses that are available-->
             <span id="reveal"></span>

</div>

Answer 1

I just removed the PHP and Ajax part of your code and open menu on show button and hide in or submit form it's working perfectly.

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script> $(document).ready(function () { $('#submit').click(function () { $("#form").submit(function (e) { e.preventDefault(); $('#regModal').modal('hide'); }) }); $('#regModal').modal('hide'); $('#show').click(function () { $('#regModal').modal('show'); }); }); </script> </head> <body> <button id="show">show</button> <!-- Page Content --> <div id="page-content-wrapper" class="animated fadeInLef" style="margin-bottom:5%;width:100%"> <div style="background:#273640;width:100%;margin-top:px;padding:0.5rem;"><center> <a class="regh4" style="display:inline-block;margin-bottom:0px;width:auto;text-decoration:none;"><h5 class="#" style="font-family: 'proxima-nova','Helvetica Neue',Helvetica,arial,sans-serif;font-weight:normal;letter-spacing:5px;color:#fff;margin-top:5px;"><i class="fas fa-pen-square"></i> Course Registration Form</h5></a> </center></div><br> <!--Display Courses that are available--> <span id="reveal"></span> <div class="modal fade" id="regModal" role="dialog" aria-hidden="true" tabindex="-1" style="z-index:10000;"> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header"> <h5 style="margin-bottom:0;text-align:center;">Course Registration</h5> <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form class="#" style="" id="form" method="POST" action="#"> <div class="container-fluid-div" style=""> <div class="row-div" style=""> </div> <div style="width:100%;margin:0;margin-top:10px;text-align:right;"> <button class="btn btn-md btn-primary" id="submit" type="submit" name="submit" style="width:100%;" value="" >Register</button> </div> </div> </div> </form> </div> <div class="modal-footer" style="text-align:left;"> <button type="button" class="btn btn-default" id="close" style="float:left;background:lightgrey;color:#000;" data-dismiss="modal" aria-label="Close">Close</button> </div> </div> </div> </div> </body> </html>

Answer 2

This solved the problem for me. Thanks guys.

$('body').removeAttr('style');
$('#regModal').removeAttr('style');
$('.modal-backdrop').remove();