【发布时间】：2021-12-23 01:03:01
【问题描述】：
我有一个带有提交学生注册课程的模式的页面。成功提交后，模态框关闭，但背景褪色。我已经尝试过在 StackOverflow 上看到的可能的解决方案，但没有一个对我有用。我知道这个问题与另一个问题重复，但它描绘了不同的场景。
这是我的模态表单
<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>
我的 ajax 提交
<!--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();
}
});
}
});
我的 HTML 在这里
<!-- 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>
【问题讨论】：
-
$( '#regModal' ).modal('hide');用这个 $('#regModal').modal('hide'); 替换它它会起作用的。
-
$( '#regModal' ).modal('hide'); 有什么区别？和 $('#regModal').modal('hide'); @Neeraj
-
括号前后的空格你必须删除它
-
还是不行，我已经把空格去掉了。 ajax 提交成功，模态关闭但留下像模糊一样的褪色背景。我必须在它关闭之前刷新页面。
-
因为我可以检查它是否正确隐藏，没有任何问题。