CODEWITHSUNDEEP
jquerypugsemantic-ui
wibwaj
wibwaj

Reputation: 113

Semantic UI Multiple Modals works but previous modals are closed

Any help in solving this is greatly appreciated.

Semantic UI multiple modals are not working as expected, despite setting allowMultiple: true. In this example I have used 2 modals, a parent and child. I have used the example provided on semantic UI documentation https://semantic-ui.com/modules/modal.html#multiple-modals.

Expected Result The parent modal should remain open when child modal is triggered

Actual Result The parent modal is closed when child model is opened

Codepen https://codepen.io/rbglyfe/pen/XWMowYY

HTML (Pug)

.ui.padded.one.column.grid
  .column
    .ui.basic.grey.button.modalBtn Click Me!
.ui.modal.parent
  i.close.icon
  .header Parent Modal
  .content Multiple modals allowed
  .actions
    .ui.approve.button Open Child
    .ui.deny.button Cancel
.ui.modal.child
  .header Child Modal
  .content Parent should remain open
  .actions
    .ui.approve.button OK
    .ui.deny.button Cancel

JQuery

$(function () {
  $(".modalBtn").on("click", function () {
    $(".ui.modal.parent").modal(
      {
        onShow: function () {
          alert("parent");
        }
      },
      { allowMultiple: true }
    );
    $(".ui.modal.child")
      .modal({
        onShow: function () {
          alert("child");
        }
      })
      .modal("attach events", ".ui.modal.parent .approve", "show");
    $(".ui.modal.parent").modal("show");
  });
});

Upvotes: 1

Views: 826

Answers (1)

Daniel Manta
Daniel Manta

Reputation: 6683

First: unfortunately the documentation is not showing all relevant code in this example. Property allowMultiple: true needs to be applied both to the parent and child modals. So either you add a class called coupled to those elements like in the documentation, or just refer to both on this line:

$(".modal.parent, .modal.child").modal({ allowMultiple: true });

Second: in your code the "Open Child" button is also an .approve button, so it closes down the parent modal while you want to keep it open. Instead of using that button, I'd suggest to create a new one with class open-child as you can see below.

.ui.modal.parent
  i.close.icon
  .header Parent Modal
  .content Multiple modals allowed
  .actions
    .ui.approve.button OK
    .ui.deny.button Cancel
    .ui.open-child.button Open Child

and then open child modal when that button is clicked:

$(".ui.modal.child").modal("attach events", ".parent.modal .open-child.button");

Codepen with these changes can be seen here.

Upvotes: 2

Related Questions