使用 jquery 关闭当前模态并打开新模态

Question

我有两个模式，一个是View ，另一个是Edit 。

问题是，当我打开视图模式并单击编辑按钮时，编辑模式已打开，但视图模式仍处于打开状态，当编辑模式打开时，它会消失。

我这样做

 $("#editModal").click(function() { var id = $("#editModal").val(); $('#' + id).modal('hide'); $('#' + id).modal('show'); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <a href="#" data-toggle="modal" data-target="#viewTasks_50" class="btn btn-round btn-info btn-icon btn-sm">View</a> <div id="viewTasks_50" class="modal fade show" role="dialog"> <div class="modal-dialog"> <:-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h6 class="pull-left">Code: <label class="modal_label">T-10-Yes</label></h6> <h6 class="pull-right">Task Date, <label class="modal_label">17 May; 2018</label></h6> </div> <div class="modal-body"> <table class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>Title</th> <th>Progress</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Review system generated T&amp;Cs for deploying to website</td> <td>0%</td> <td>Pending</td> </tr> </tbody> </table> </div> <div class="modal-footer"> <div class="pull-left"> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#editTasks_50" value="50" id="editModal">Edit</button> </div> <div class="pull-right"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div id="editTasks_50" class="modal fade show" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> </div> <div class="modal-body"> </div> <div class="modal-footer"> <div class="pull-left"> <input type="button" class="btn btn-info" value="Update"> </div> <div class="pull-right"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>

我需要当我点击编辑按钮然后编辑模态打开并且视图模态关闭时。

Answer 1

我要说的是关闭所有打开的模态，然后仅打开所需的模态。 就像是：

$("#editModal").click(function() {
  var id = $("#editModal").val();

  $('.modal').modal('hide');
  $('#' + id).modal('show');
});

由于所有模态都有一个共同的类“模态”，它将关闭所有模态并显示您想要的模态。

希望这可以帮助！！ 干杯

Answer 2

这是一个可行的示例 。

 $("#editModal").click(function() { var button = $(this); var id = button.val(); button.closest(".modal").modal('hide'); $('#' + id).modal('show'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <a href="#" data-toggle="modal" data-target="#viewTasks_50" class="btn btn-round btn-info btn-icon btn-sm">View</a> <div id="viewTasks_50" class="modal fade show" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h6 class="pull-left">Code : <label class="modal_label">T-10-Yes</label></h6> <h6 class="pull-right">Task Date : <label class="modal_label">17 May, 2018</label></h6> </div> <div class="modal-body"> <table class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>Title</th> <th>Progress</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Review system generated T&amp;Cs for deploying to website</td> <td>0%</td> <td>Pending</td> </tr> </tbody> </table> </div> <div class="modal-footer"> <div class="pull-left"> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#editTasks_50" value="50" id="editModal">Edit</button> </div> <div class="pull-right"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div id="editTasks_50" class="modal fade show" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> </div> <div class="modal-body"> </div> <div class="modal-footer"> <div class="pull-left"> <input type="button" class="btn btn-info" value="Update"> </div> <div class="pull-right"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> 

Answer 3

这有点动态。

let modals = [
    {
        'callToAction': 'toggleVisitorProfileModal',
        'modalToToggle': 'visitorProfileModal'
    }, {
        'callToAction': 'toggleBuyTokensModal',
        'modalToToggle': 'tokensModal'
    },
];

$.each(modals, function (key, value) {
    $('.' + value.callToAction).on('click', function () {
            if ($('#' + value.modalToToggle).hasClass('in') === false) {
                $('.modal').modal('hide');
                $('.modal-backdrop').remove();
                $('#' + value.modalToToggle).modal('show');
            }
        }
    )
});

每当您单击元素以激活模态时

• 检查当前模态是否打开。 开放模式具有关联的IN类。 如果这是错误的，我们知道您尝试打开的模态当前未打开。
• 然后，我们关闭所有模态。
• 当同一页面上有多个模式时，您可能会遇到黑色背景不消失的情况。 要删除此内容，我们将删除所有包含MODAL-BACKDROP类的元素。
• 最后，我们展示了被切换的模态。

Answer 4

在后台关闭所有模式

$（'。modal'）。modal（'hide'）;

现在，打开新的模式

$（'＃myModal'）。modal（'show'）;

我知道这篇文章太旧了，但是我在这类问题上花了很多时间，这是一个简单的解决方案，方法是在网页中隐藏模式，然后显示新的模式

Answer 5

$('#mymodal').modal('hide');

它工作正常，如果不关闭模式然后使用下面的脚本

$('#mymodal').modal('hide');
$('div.modal-backdrop.fade.in').attr('class','none');