Skip to content

Instantly share code, notes, and snippets.

@marcosfreitas
Created March 9, 2015 08:09
Show Gist options
  • Save marcosfreitas/53a6c6a891aa5441d938 to your computer and use it in GitHub Desktop.
Save marcosfreitas/53a6c6a891aa5441d938 to your computer and use it in GitHub Desktop.
Creating Multiple Modals in Semantic UI :)
<!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>
@chized
Copy link

chized commented Dec 6, 2016

Thank!! really helpful

@rafranchin
Copy link

Thank you!

@musatoktas
Copy link

musatoktas commented Oct 17, 2018

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