[英]Bootstrap modal opens automatically on page load, but how to disable if form is submitted
[英]Prevent Bootstrap modal automatically showing on Page Load
就我而言,我有一个引导模式可以在单击按钮时启动。 但是当页面加载时,会打开一个空的模式。 我怎样才能防止这种情况? 我尝试了几种方法,有时在页面加载时没有加载模式,但是当单击按钮时它没有打开。 什么是更好的解决方案?
下面的代码我试过
// $('#empDetailsModal').show(); // $('.modal-dialog').show(); // $('.modal-backdrop').css("display", ""); $('#empDetailsModal').modal('show'); // $('#empDetailsModal').show(); // $('.modal').addClass('show'); // $('.modal-dialog').show() // $('.modal-backdrop').removeClass('hide'); // $('.modal-backdrop').addClass('show');
这是我调用此模态的代码,
//? show employee details of a selected job $(document).on('click','#empDetailsBtn', function(e) { e.preventDefault(); // $('#clearFilter').val(emp_id+" "+job_id); // $('#filterByDate').val(emp_id+" "+job_id); // $('#filterByTime').val(emp_id+" "+job_id); //window.emp_id = $(this).val(); const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, }) $.ajax({ type: "GET", url: '/job_employee_details', data: { job_id: $(this).val() } }) .done(function(res) { if(res == 'no_data'){ //console.log(res) Toast.fire({ type: 'error', title: 'No Details!' }) } else{ //console.log(res) $.each(res.details, function(index, value) { //console.log(window.emp_id); $('#emp_details_table_body').append( "<tr>"+ "<td>"+ value.firstname + "</td>" + "<td>"+ value.lastname + "</td>" + "<td>"+ value.category + "</td>" + "<td>"+ "<button class='btn btn-danger btn-sm' id='removeJobBtn' emp_id='"+value.emp_id+"' job_id='"+value.job_id+"'>Remove</button>" + "</td>" +"</tr>" ); // Modal show $('#empDetailsModal').modal('show'); }); } }) .fail(function(err) { console.log('error') }); });
这是我的模态代码,
<!-- Modal --> <div class="modal fade" id="empDetailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="width: 750px"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Assigned Employee Details</h5> <button type="button" class="close" id="empDetailsModalcloseIcon" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" id="modal_body"> <table class="table" style="background: #cccccc08"> <thead class="bg-primary"> <tr> <th scope="col">Firstname</th> <th scope="col">Lastname</th> <th scope="col">Category</th> <th scope="col">Actions</th> </tr> </thead> <tbody id="emp_details_table_body"> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" id="empDetailsModalClose">Close</button> </div> </div> </div> </div> <!-- Modal -->
我被这个问题困了好几天。 因此,如果您能帮助我,请提前致谢!
在您的 JS 文档就绪调用中,您可以添加.modal('hide')
如下所示:
$( document ).ready(function() {
$('#myModal').modal('hide')
});
其中'#myModal'
是对您的模态'#myModal'
。
还要确保您没有调用$('#empDetailsModal').modal('show');
在按钮单击处理程序之外。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.