javascript - Close current modal and open new modal using jquery

I have two modals, one is View and other is Edit.

Issue is that when I open a view modal and click on edit button then edit modal is open but view modal is still open its will be disappear when edit modal is open.

I am doing like this

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

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

<link rel="stylesheet" href=".1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src=".1.1/jquery.min.js"></script>
<script src=".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>

I have two modals, one is View and other is Edit.

Issue is that when I open a view modal and click on edit button then edit modal is open but view modal is still open its will be disappear when edit modal is open.

I am doing like this

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

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./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>

I need that when I click on edit button then edit Modal is open and view modal is closed.

Share Improve this question edited May 21, 2018 at 8:35 Krzysztof Janiszewski 3,8543 gold badges20 silver badges38 bronze badges asked May 18, 2018 at 7:06 Arslan 4332 gold badges5 silver badges19 bronze badges

can you made jsfiddle for your current code? – beginnerprogrammer Commented May 18, 2018 at 7:09
i made it but its make design issue for me – Arslan Commented May 18, 2018 at 7:13

Add a ment |

5 Answers 5

Sorted by: Reset to default 1

Here is an working example of how you can do it.

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

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn./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>

What I would say is close all the modals that are opened and then open only the modal you want. Something like:

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

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

Since all modal have a mon class 'modal' it will close all the modal and show the modal you want.

Hope this helps!! Cheers

This is a bit more dynamic.

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');
            }
        }
    )
});

Whenever you click an element to activate a modal

Check if the current modal is open. An open modal has the IN class associated. If this is false we know that the modal you try to open is currently NOT open.
We then close all modals.
When there are multiple modals on the same page you might e across the black background not disappearing. To remove this we remove all elements containing the MODAL-BACKDROP class.
And last we show the modal that is toggled.

Closing all Modals in background

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

Now, opening new Modal

$('#myModal').modal('show');

I know this post is too old but I spend a lot of time in this type of issues and it's a simple solution by hiding modals in the webpage and then show new modal

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

it works correct, If not closing modal then use below script

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Close current modal and open new modal using jquery - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)