Skip to content

Instantly share code, notes, and snippets.

@marcosfreitas

marcosfreitas/multiple-modals-semantic.html

Created March 9, 2015 08:09
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save marcosfreitas/53a6c6a891aa5441d938 to your computer and use it in GitHub Desktop.
Save marcosfreitas/53a6c6a891aa5441d938 to your computer and use it in GitHub Desktop.
Download ZIP
Creating Multiple Modals in Semantic UI :)
Raw
multiple-modals-semantic.html
<!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>
@codebysandeep
Copy link

Thanks for your help. I'm also facing problem with Semantic-UI modal. If I take your working code as example, may I know how we can load first modal #modal1 on web page onload.

On Semantic-UI website I can see I have to use active class. But after using active class (div class="ui united modal active" id="modal1") this is not working. http://semantic-ui.com/modules/modal.html#active

Can you help me.

@marcosfreitas
Copy link
Author

Hi brother, the class "active" isn't a event but is a state and she don't serve to automatically open herself. To show a modal you need to call her with the javascript parameters:

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

@chambahr
Copy link

hi! am having this problem, my modal works but when it displays it stays on the page making it difficult to manage other aspect of the page. any ideas?

@marcosfreitas
Copy link
Author

Can you post (a gist) with your code what I can reproduce here?

@chized
Copy link

chized commented Dec 6, 2016

Thank!! really helpful

@rafranchin
Copy link

Thank you!

@musatoktas
Copy link

musatoktas commented Oct 17, 2018 •
edited

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