使用jquery创建多个模态

时间：2017-10-24 07:53:49

标签： javascript jquery html css

我正在为我的网站构建一个多模式，我正在努力。我设法从一些东西开始，目前我一直试图让模态触发器彼此分开。它基本上是通过附加我相信的数据属性来引导它的方式。我本可以使用bootstrap解决我的问题，但我想避免所有的代码膨胀，只是自己构建它。

这是我一直在研究的示例代码。我设法做了循环，但似乎打开了错误的模式。

＆＃13;
＆＃13; 
    $('.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');
	})
＆＃13; 
/* 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 */
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

如果我理解你的问题。您想要在按钮单击事件上显示相应的模态容器。我简化了代码。希望它有效。

        $('.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>

答案 1 :(得分：1)

您只需使用Jquery UI创建模态。

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

答案 2 :(得分：1)

我已经编辑了你的js mantaining html结构。在将模式移到容器外之前，您只需要详细说明ID;）

$('.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>

答案 3 :(得分：1)

如果对代码进行以下更改，则可以正常使用。

所做的更改：

  1. 我已对$(this).attr('id', "modal" + (i + 1))行进行了注释，因为它会为id创建重复的modal-container。

  2. 将$(modal_container_id).addClass('show-modal');更改为$("[data-modal='" + $(this).attr("id") + "']").addClass('show-modal');，因为之前的循环导致modal_container_id引用modal2。

    3. $('.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>

相关问题
最新问题