Modal keeps stacking

[tejasvedantham]

✖ USAGE QUESTIONS → Use these dedicated resources: Docs - http://www.semantic-ui.com Chat - https://gitter.im/Semantic-Org/Semantic-UI SO - https://stackoverflow.com/questions/tagged/semantic-ui?sort=votes

✔ Enhancements → Be specific. Assume backwards compatibility is a necessity. Suggest implementation when possible. ✔ BUGS → ❤❤❤. Keep in mind some bugs may not be immediately fixable due to backwards compatibility or CSS limitations.

Title (Put in field above)

Use the format: [Component] Component Should Do X i.e. [Checkbox] onChange Should Fire When Update Triggered via DOM

Steps

I am loading different html pages using jQuery.load (to navigate to different pages when using sidebar). On one page, I have a form that when submitted should show a modal to confirm submission with the forms data. However, when I leave the page and return to it, and submit the form again, I get two modals that stack on top of each other. When I exit and return again, I get three of the same modals (etc)

$('#myForm').submit(function (event) {
   event.preventDefault();

   //Do some stuff

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

Expected Result

I want the modal to show only once every time (even when I go to another page and back to the original page).

Actual Result

The modals keep stacking on top of each other.

Version

2.4.2

Testcase

[Fork, update, and replace to show the bug]: https://jsfiddle.net/ca0rovs3/

[iamareebjamal]

This repo is deprecated, please use fomantic UI

[hughbris]

Ah man, been working with this framework for a few months and only now I see Fomantic UI! (I mean, I knew SUI was inactive). Stumbled on this trying to diagnose a modal issue.

At the very least, could the SUI maintainer please link to this project in the README or project description??

[iamareebjamal]

Not really, SUI maintainers don't consider it to be deprecated, they continued saying that it is maintained for 4 years of radio silence and then community forked it

[lubber-de]

@tejasvedantham The community fork Fomantic-UI has a toast component, which seems to be better suited for your usecase https://fomantic-ui.com/modules/toast.html

$('#myForm').submit(function (event) {
   event.preventDefault();

  $('body')
    .toast({
      message: 'Form submitted'
    }) 
  ;
});