Welcome to my blog!

Multiple Modals Semantic

April 18, 2021 22:13

Multiple Modals Semantic (edit)

Creating Multiple Modals in Semantic UI :) (github.com)

<!DOCTYPE html>
<html lang="en">
	<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>

<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 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 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>

<!-- 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>

<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>

//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.
	// 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




Recent posts