CODEWITHSUNDEEP
javascriptjqueryhtmlcss
clestcruz
clestcruz

Reputation: 1111

Creating multiple modals using jquery

I'm in the middle of building a multiple modal for my website that I'm working on. I've managed to start with something and currently I'm stuck in trying to make modals trigger separately from one another. It is basically how bootstrap does it by appending a data-attribute I believe. I could have just use bootstrap to solve my problem but I would like to avoid all the code bloat and just built it myself.

Here a sample code that I have been working on. I've managed to make the looping but it seems to open the wrong modal.

    $('.modal-container').insertAfter('.layout-container');

    $('.modal-container').each(function(i) {
        $(this).attr('id', "modal" + (i + 1));

        modal_container_id = $(this).attr('data-modal', "modal" + (i + 1));
    });

    $('.modal-item .modal-btn').each(function(i) {

        var modal_id = $(this).attr('id', "modal" + (i + 1));

        $(modal_id).on('click', function() {
            $(modal_container_id).addClass('show-modal');
            $('body').addClass('lock-scroll');
        });
    })


    //Close Modal
	$('.modal-container .close-modal').on('click', function() {
	    $('.modal-container').removeClass('show-modal');
	    $('body').removeClass('lock-scroll');
	})
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.layout-container {
  position: relative; }

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in; }
  .modal-container.show-modal {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in;
    -moz-transition: opacity 0.3s ease-in;
    transition: opacity 0.3s ease-in; }
  .modal-container .modal-body {
    position: absolute;
    max-width: 500px;
    height: 500px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    padding: 20px;
    background-color: #fff; }

/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="layout-container">
    <div class="modal-item">
        <button class="modal-btn">Modal One Trigger</button>

        <div class="modal-container">
            <button class="close-modal">Close Modal</button>
            Modal One
        </div>
    </div>


    <div class="modal-item">
        <button class="modal-btn">Modal Two Trigger</button>

        <div class="modal-container">
            <button class="close-modal">Close Modal</button>
            Modal Two
        </div>
    </div>

</div>

Upvotes: 1

Views: 3406

Answers (4)

Phani Kumar M
Phani Kumar M

Reputation: 4590

If you make the below changes to your code, it will work fine.

Changes made:

  1. I have commented out the line $(this).attr('id', "modal" + (i + 1)) as it will create duplicate id for modal-container.

  2. Change $(modal_container_id).addClass('show-modal'); to $("[data-modal='" + $(this).attr("id") + "']").addClass('show-modal'); as modal_container_id refers to modal2 because of previous loop.

$('.modal-container').insertAfter('.layout-container');

$('.modal-container').each(function (i) {
	modal_container_id = $(this).attr('data-modal', "modal" + (i + 1));
});

$('.modal-item .modal-btn').each(function (i) {
	var modal_id = $(this).attr('id', "modal" + (i + 1));
	$(modal_id).on('click', function () {
		$("[data-modal='" + $(this).attr("id") + "']").addClass('show-modal');
		$('body').addClass('lock-scroll');
	});
})

//Close Modal
$('.modal-container .close-modal').on('click', function () {
	$('.modal-container').removeClass('show-modal');
	$('body').removeClass('lock-scroll');
})
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	/* HTML5 display-role reset for older browsers */

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol,
	ul {
		list-style: none;
	}

	blockquote,
	q {
		quotes: none;
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	.layout-container {
		position: relative;
	}

	.modal-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		visibility: hidden;
		opacity: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		-webkit-transition: opacity 0.3s ease-in;
		-moz-transition: opacity 0.3s ease-in;
		transition: opacity 0.3s ease-in;
	}

	.modal-container.show-modal {
		visibility: visible;
		opacity: 1;
		-webkit-transition: opacity 0.3s ease-in;
		-moz-transition: opacity 0.3s ease-in;
		transition: opacity 0.3s ease-in;
	}

	.modal-container .modal-body {
		position: absolute;
		max-width: 500px;
		height: 500px;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		padding: 20px;
		background-color: #fff;
	}

	/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="layout-container">
	<div class="modal-item">
		<button class="modal-btn">Modal One Trigger</button>

		<div class="modal-container">
			<button class="close-modal">Close Modal</button>
			Modal One
		</div>
	</div>

	<div class="modal-item">
		<button class="modal-btn">Modal Two Trigger</button>

		<div class="modal-container">
			<button class="close-modal">Close Modal</button>
			Modal Two
		</div>
	</div>
</div>

Upvotes: 1

Roberto Bisello
Roberto Bisello

Reputation: 1235

I've edited your js mantaining the html structure. You only have to elaborate ids before moving the modal outside the container ;)

$('.modal-item').each(function(idx) {
  var $modal = $(this).find('.modal-container'),
    $button = $(this).find('.modal-btn');
  $button.data('modal', '#modal-' + idx);
  $modal.attr('id', 'modal-' + idx);
  $modal.insertAfter('.layout-container');
});

$('.layout-container').on('click', '.modal-btn', function() {
  $($(this).data('modal')).addClass('show-modal');
  $('body').addClass('lock-scroll');
});

//Close Modal
$('.modal-container .close-modal').on('click', function() {
  $('.modal-container').removeClass('show-modal');
  $('body').removeClass('lock-scroll');
})
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.layout-container {
  position: relative; }

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in; }
  .modal-container.show-modal {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in;
    -moz-transition: opacity 0.3s ease-in;
    transition: opacity 0.3s ease-in; }
  .modal-container .modal-body {
    position: absolute;
    max-width: 500px;
    height: 500px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    padding: 20px;
    background-color: #fff; }

/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="layout-container">
    <div class="modal-item">
        <button class="modal-btn">Modal One Trigger</button>

        <div class="modal-container">
            <button class="close-modal">Close Modal</button>
            Modal One
        </div>
    </div>


    <div class="modal-item">
        <button class="modal-btn">Modal Two Trigger</button>

        <div class="modal-container">
            <button class="close-modal">Close Modal</button>
            Modal Two
        </div>
    </div>

</div>

Upvotes: 1

Ritesh Nair
Ritesh Nair

Reputation: 3355

You can simply use Jquery UI to create modals.

$(document).ready(function(){
		
		$( ".dialog" ).dialog({
			autoOpen: false
		});
		
		$("#modal1Btn").click(function(){
			$( "#dialog1" ).dialog("open" );
		});
		
		$("#modal2Btn").click(function(){
			$( "#dialog2" ).dialog("open" );
		})
	})
  
  <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
 
 <button id="modal1Btn" class="modal-btn">Modal One Trigger</button>
 <button id="modal2Btn" class="modal-btn">Modal Two Trigger</button>
 
<div class="dialog" id="dialog1" title="Basic dialog">
  <p>Dailog 1</p>
</div>

<div class="dialog" id="dialog2" title="Basic dialog">
  <p>Dailog 2</p>
</div>
 
 
</body>
</html>

Upvotes: 1

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

If I understood your question. You want to show the respective modal container on button click events. I have simplified the code. Hope it works.

        $('.modal-btn').on('click', function() {
            $(this).next('.modal-container').addClass('show-modal');
            $('body').addClass('lock-scroll');
        });


    //Close Modal
	$('.modal-container .close-modal').on('click', function() {
	    $('.modal-container').removeClass('show-modal');
	    $('body').removeClass('lock-scroll');
	})
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.layout-container {
  position: relative; }

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in; }
  .modal-container.show-modal {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in;
    -moz-transition: opacity 0.3s ease-in;
    transition: opacity 0.3s ease-in; }
  .modal-container .modal-body {
    position: absolute;
    max-width: 500px;
    height: 500px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    padding: 20px;
    background-color: #fff; }

/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="layout-container">
    <div class="modal-item">
        <button class="modal-btn">Modal One Trigger</button>

        <div class="modal-container">
            <button class="close-modal">Close Modal</button>
            Modal One
        </div>
    </div>


    <div class="modal-item">
        <button class="modal-btn">Modal Two Trigger</button>

        <div class="modal-container">
            <button class="close-modal">Close Modal</button>
            Modal Two
        </div>
    </div>

</div>

Upvotes: 3

Related Questions