Created
March 9, 2015 08:09
-
-
Save marcosfreitas/53a6c6a891aa5441d938 to your computer and use it in GitHub Desktop.
Creating Multiple Modals in Semantic UI :)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Multiple Modals With Semantic UI</title> | |
| <link rel="stylesheet" href="path_to_semantic/dist/semantic.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <script src="path_to_semantic/dist/semantic.js"></script> | |
| </head> | |
| <body> | |
| <div class="ui united modal" id="modal1"> | |
| <div class="header">Modal 1</div> | |
| <div class="content">Some info will go here...</div> | |
| <div class="actions"> | |
| <div class="ui blue labeled icon button" id="btn-modal-1"><i class="arrow sign left icon"></i>Close me and Call modal 2</div> | |
| </div> | |
| </div> | |
| <div class="ui united fullscreen modal" id="modal2"> | |
| <div class="header"> Modal 2 </div> | |
| <div class="content">If you want to close previous modals before show the next modal, you should disable the parameter <b>'allowMultiple'</b>. </div> | |
| <div class="actions"> | |
| <div class="ui red labeled icon button" id="btn-modal-2"><i class="arrow sign left icon"></i>Close me and Call modal 3</div> | |
| </div> | |
| </div> | |
| <div class="ui united small modal" id="modal3"> | |
| <div class="header"> Modal 3 </div> | |
| <div class="content"> Hello World </div> | |
| <div class="actions"> | |
| <div class="ui blue labeled icon button" id="btn-modal-3"> <i class="checkmark icon"></i> Close All and Finish. </div> </div> | |
| </div> | |
| <!-- Bored Modal --> | |
| <div class="ui small modal" id="modal4"> | |
| <div class="header"> Don't talk with me! </div> | |
| <div class="content"> :'( darkness my only old friend... <br> I don't have the class <b>.united</b></div> | |
| <div class="actions"><div class="ui secondary button"> Close me! </div></div> | |
| </div> | |
| <center style="padding: 30px;"> | |
| <button data-modal="modal1" id="call-modals" class="ui green button">Call Modal 1, 2 and 3</button> | |
| <button data-modal="modal2" id="call-modal-2" class="ui red button">Call Modal 2 and 3 after it</button> | |
| <button data-modal="modal3" id="call-modal-3" class="ui orange button">Call Modal 3 only</button> | |
| <button data-modal="modal4" id="call-modal-4" class="ui secondary button">Call Bored Modal Alone in the dark</button> | |
| </center> | |
| <script> | |
| //Multiple Modals | |
| // all first 3 modals will be called and showed but 'BORED MODAL' won't. Only when you click on the last button | |
| // .united is a custom class and you can use anything. | |
| $('.united.modal').modal({ | |
| // this parameter will enable/disable the closing for the previous .united modals when the next will be opened :) | |
| allowMultiple: false, | |
| }); | |
| // attach events | |
| // haven't attached events over button of modal 3 | |
| $('#modal1').modal('attach events', '#call-modals'); | |
| $('#modal2').modal('attach events', '#btn-modal-1'); | |
| $('#modal3').modal('attach events', '#btn-modal-2'); | |
| // disable the comment bellow to call the modal 4 after click on button into modal 3 | |
| //$('#modal4').modal('attach events', '#btn-modal-3'); | |
| // Individual events - unecessary but i does it. | |
| $('center .button').on('click', function(){ | |
| // using the attribute data-modal to identify for what modal the button references | |
| modal = $(this).attr('data-modal'); | |
| // creating the individual event attached to click over button | |
| $('#'+modal+'.modal').modal( | |
| 'show' | |
| ); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Thank you!
I've opened this file in my local, modals are slights perfect, close mechanism doesnt works well. If I'll get over that issue I'll post the upgraded to here! 😃
Edit: Okey, if you want to close modal, by button click, you can simply add cancel or approve class to your button's class list.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank!! really helpful