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

时间：2018-05-18 07:06:40

标签： javascript jquery html

我有两个模式，一个是查看，另一个是编辑。

问题是当我打开视图模式并单击编辑按钮然后编辑模态打开但视图模态仍然打开时它将在编辑模态打开时消失。

我这样做

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

  $('#' + id).modal('hide');
  $('#' + id).modal('show');
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

4 个答案:

答案 0 :(得分：2)

我要说的是关闭所有打开的模态，然后只打开你想要的模态。类似的东西：

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

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

由于所有模态都有一个共同的类＆＃39;模态＆＃39;它将关闭所有   模态并显示你想要的模态。

希望这有帮助!! 干杯

答案 1 :(得分：1)

以下是您可以做的工作示例。

$("#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>

答案 2 :(得分：0)

这有点动态。 

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类的元素。
  • 最后，我们展示了被切换的模态。

答案 3 :(得分：0)

在后台关闭所有模式

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

现在，打开新的模式

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

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

相关问题
最新问题