javascript - 模态内的模态，切换下一个时无法关闭当前一个

标签 javascript jquery html css

对于我的网站，我选择使用预建模态，其中包含一些 CSS 和 2 个 JS 文件。 我在处理 HTML 和 CSS 代码时没有问题，但我还没有足够的 JS 知识来解决我遇到的问题。

以下代码片段显示了我网站上的内容，基本上在我的一个模态框内有一个打开新模态框的链接。除了我找不到在打开新模式之前关闭当前模式的方法。

用于切换模式的 HTML 代码是:

<a href="#" class="md-trigger" data-modal="modal-name">

并关闭模态:

<a href="#" class="md-close">

这是我的代码片段: 

/** First JS script : classie.js **/

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );




/** Second JS Script : modalEffects.js **/

/**
 * modalEffects.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var ModalEffects = (function() {

	function init() {

		var overlay = document.querySelector( '.md-overlay' );

		[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

			var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
				close = modal.querySelector( '.md-close' );

			function removeModal( hasPerspective ) {
				classie.remove( modal, 'md-show' );

				if( hasPerspective ) {
					classie.remove( document.documentElement, 'md-perspective' );
				}
			}

			function removeModalHandler() {
				removeModal( classie.has( el, 'md-setperspective' ) ); 
			}

			el.addEventListener( 'click', function( ev ) {
				classie.add( modal, 'md-show' );
				overlay.removeEventListener( 'click', removeModalHandler );
				overlay.addEventListener( 'click', removeModalHandler );

				if( classie.has( el, 'md-setperspective' ) ) {
					setTimeout( function() {
						classie.add( document.documentElement, 'md-perspective' );
					}, 25 );
				}
			});

			close.addEventListener( 'click', function( ev ) {
				ev.stopPropagation();
				removeModalHandler();
			});

		} );

	}

	init();

})();
.md-modal *, .md-modal *:after, .md-modal *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.md-modal body, .md-modal html { font-size: 100%; padding: 0; margin: 0; font-family: 'Comfortaa', cursive; }

/* Clearfix */
.md-modal .clearfix:before, .md-modal .clearfix:after { content: " "; display: table; }
.md-modal .clearfix:after { clear: both; }

/* Header Style */
.md-modal .main,
.md-modal .container > header {
	margin: 0 auto;
	padding: 20px;
}

.md-modal .container > header {
	text-align: center;
	background: #d94839;
	padding: 30px;
}

.md-modal .container > header h1 {
	font-size: 28px;
	line-height: 42;
	margin: 0;
}

.md-modal .container > header span {
	display: block;
	font-size: 60%;
	opacity: 0.7;
	padding: 0 0 5px 1px;
}

/* Main Content */
.md-modal .main {
	max-width: 800px;
}

.md-modal .column {
	float: left;
	width: 50%;
	padding: 0 20px;
	min-height: 300px;
	position: relative;
}

.md-modal .column:nth-child(2) {
	box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}

.md-modal .column p {
	font-size: 14px;
	padding: 0;
	margin: 0;
	text-align: right;
	line-height: 22px;
}

.md-modal button {
	font-weight: 400;
	border: none;
	padding: 8px 16px;
	background: #d3493b;
	color: #fff;
	font-family: 'Comfortaa', cursive;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 3px 2px;
	border-radius: 2px;
}

.md-modal button:hover {
	background: #c0392b;
}

@media screen and (max-width: 46.0625em) {
	.md-modal .column {
		width: 100%;
		min-width: auto;
		min-height: auto;
		padding: 10px; 
	}

	.md-modal .column p {
		text-align: left;
		font-size: 14px;
	}

	.md-modal .column:nth-child(2) {
		box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
	}
}
	
/* components */
	
.md-modal .md-perspective,
.md-modal .md-perspective body {
	height: 100%;
	overflow: hidden;
}

.md-modal .md-perspective body  {
	background: #222;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
}

.md-modal .container {
	background: #a6ba89;
	min-height: 100%;
}

.md-modal {
	position: fixed;
	top: 150px;
	left: 50%;
	width: 50%;
	width: 400px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(0,0,0,0.4);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Content styles */

.md-modal .md-content {
	border: 1px solid #7a994d;
	font-family: 'Comfortaa', cursive;
	line-height: 22px;
	color: #fff;
	background: #a6ba89;
	position: relative;
	border-radius: 5px;
	margin: 0 auto;
}
.md-modal p {
    font-family: 'Comfortaa', cursive;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
}
.md-modal .md-content a {
	font-family: 'Comfortaa', cursive;
	color: #d3493b;
	text-decoration: none;
	margin: 0;
	padding: 2px;
	font-weight: bold;
}

.md-modal .md-content a:hover {
	color: #c0392b
}

.md-modal .md-content h3 {
	margin: 0;
	padding: 10px;
	text-align: center;
	font-family: 'Comfortaa', cursive;
	font-size: 24px;
	line-height: 36px;
	opacity: 0.8;
	background: rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;
}

.md-modal .md-content > div {
	padding: 15px 40px 30px;
	margin: 0;
	font-size: 14px;
}

.md-modal .md-content > div p {
	margin: 0;
	padding: 10px 0;
	font-family: inherit;
	text-align: left;
}

.md-modal .md-content > div ul {
	margin: 0;
	padding: 0 0 30px 20px;
}

.md-modal .md-content > div ul li {
	padding: 5px 0;
}

.md-modal  .md-content button {
	display: block;
	margin: 0 auto;
	font-size: 12px;
}

/* Effect 9: 3D flip vertical */

.md-effect-9.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-9 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX(-70deg);
	-moz-transform: rotateX(-70deg);
	-ms-transform: rotateX(-70deg);
	transform: rotateX(-70deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
}

.md-show.md-effect-9 .md-content {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	opacity: 1;
}
		<ul class="txt">
			<li><a href="#" class="md-trigger" data-modal="modal-about">Modal 1</a></li>
		</ul>

<div class="md-modal md-effect-9" id="modal-about">
	<div class="md-content">
		<h3>Modal 1</h3>
		<div>
			<p>Modal content <a href="#" class="md-trigger" data-modal="modal-credits">Modal 2</a>
			</p>
			<button class="md-close">Close</button>
		</div>
	</div>
</div>

<div class="md-modal md-effect-9" id="modal-credits">
	<div class="md-content">
		<h3>Modal 2</h3>
		<div>
			<p>Another content</p>
			<button class="md-close">Close</button>
		</div>
	</div>
</div>

<!-- the overlay element -->
<div class="md-overlay"></div><br type="_moz">


<script src="/core/script/modal/js/classie.js"></script>
<script src="/core/script/modal/js/modalEffects.js"></script>

我检查了很多处理这个问题的线程，但不幸的是没有找到适合我的 JS 代码的东西。有谁知道如何让我的第一个模态在第二个模态弹出之前自行关闭？

如有任何建议/提示，我们将不胜感激，非常感谢。

最佳答案

最简单的方法，只需在打开时保存当前模态并在尝试打开另一个模态时关闭它

/** First JS script : classie.js **/

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 *
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

(function(window) {

  'use strict';

  // class helper functions from bonzo https://github.com/ded/bonzo

  function classReg(className) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  }

  // classList support for class management
  // altho to be fair, the api sucks because it won't accept multiple classes at once
  var hasClass, addClass, removeClass;

  if ('classList' in document.documentElement) {
    hasClass = function(elem, c) {
      return elem.classList.contains(c);
    };
    addClass = function(elem, c) {
      elem.classList.add(c);
    };
    removeClass = function(elem, c) {
      elem.classList.remove(c);
    };
  } else {
    hasClass = function(elem, c) {
      return classReg(c).test(elem.className);
    };
    addClass = function(elem, c) {
      if (!hasClass(elem, c)) {
        elem.className = elem.className + ' ' + c;
      }
    };
    removeClass = function(elem, c) {
      elem.className = elem.className.replace(classReg(c), ' ');
    };
  }

  function toggleClass(elem, c) {
    var fn = hasClass(elem, c) ? removeClass : addClass;
    fn(elem, c);
  }

  var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
  };

  // transport
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(classie);
  } else {
    // browser global
    window.classie = classie;
  }

})(window);




/** Second JS Script : modalEffects.js **/

/**
 * modalEffects.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var ModalEffects = (function() {

  function init() {

    var overlay = document.querySelector('.md-overlay'),
        opened;

    function removeModal(modal, hasPerspective) {
      classie.remove(modal, 'md-show');

      if (hasPerspective) {
        classie.remove(document.documentElement, 'md-perspective');
      }
    }

    [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el, i) {

      var modal = document.querySelector('#' + el.getAttribute('data-modal')),
        close = modal.querySelector('.md-close');


      function removeModalHandler() {
        removeModal(modal, classie.has(el, 'md-setperspective'));
      }

      el.addEventListener('click', function(ev) {
        if(opened){
          removeModal(opened.modal, classie.has(opened.el, 'md-setperspective'));
        }
        classie.add(modal, 'md-show');
        overlay.removeEventListener('click', removeModalHandler);
        overlay.addEventListener('click', removeModalHandler);

        if (classie.has(el, 'md-setperspective')) {
          setTimeout(function() {
            classie.add(document.documentElement, 'md-perspective');
          }, 25);
        }
        opened = {
          el:el, modal:modal
        }
      });

      close.addEventListener('click', function(ev) {
        ev.stopPropagation();
        removeModalHandler();
      });

    });

  }

  init();

})();
.md-modal *,
.md-modal *:after,
.md-modal *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.md-modal body,
.md-modal html {
  font-size: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Comfortaa', cursive;
}
/* Clearfix */

.md-modal .clearfix:before,
.md-modal .clearfix:after {
  content: " ";
  display: table;
}
.md-modal .clearfix:after {
  clear: both;
}
/* Header Style */

.md-modal .main,
.md-modal .container > header {
  margin: 0 auto;
  padding: 20px;
}
.md-modal .container > header {
  text-align: center;
  background: #d94839;
  padding: 30px;
}
.md-modal .container > header h1 {
  font-size: 28px;
  line-height: 42;
  margin: 0;
}
.md-modal .container > header span {
  display: block;
  font-size: 60%;
  opacity: 0.7;
  padding: 0 0 5px 1px;
}
/* Main Content */

.md-modal .main {
  max-width: 800px;
}
.md-modal .column {
  float: left;
  width: 50%;
  padding: 0 20px;
  min-height: 300px;
  position: relative;
}
.md-modal .column:nth-child(2) {
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1);
}
.md-modal .column p {
  font-size: 14px;
  padding: 0;
  margin: 0;
  text-align: right;
  line-height: 22px;
}
.md-modal button {
  font-weight: 400;
  border: none;
  padding: 8px 16px;
  background: #d3493b;
  color: #fff;
  font-family: 'Comfortaa', cursive;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  margin: 3px 2px;
  border-radius: 2px;
}
.md-modal button:hover {
  background: #c0392b;
}
@media screen and (max-width: 46.0625em) {
  .md-modal .column {
    width: 100%;
    min-width: auto;
    min-height: auto;
    padding: 10px;
  }
  .md-modal .column p {
    text-align: left;
    font-size: 14px;
  }
  .md-modal .column:nth-child(2) {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}
/* components */

.md-modal .md-perspective,
.md-modal .md-perspective body {
  height: 100%;
  overflow: hidden;
}
.md-modal .md-perspective body {
  background: #222;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
}
.md-modal .container {
  background: #a6ba89;
  min-height: 100%;
}
.md-modal {
  position: fixed;
  top: 150px;
  left: 50%;
  width: 50%;
  width: 400px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.md-show {
  visibility: visible;
}
.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible;
}
/* Content styles */

.md-modal .md-content {
  border: 1px solid #7a994d;
  font-family: 'Comfortaa', cursive;
  line-height: 22px;
  color: #fff;
  background: #a6ba89;
  position: relative;
  border-radius: 5px;
  margin: 0 auto;
}
.md-modal p {
  font-family: 'Comfortaa', cursive;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
}
.md-modal .md-content a {
  font-family: 'Comfortaa', cursive;
  color: #d3493b;
  text-decoration: none;
  margin: 0;
  padding: 2px;
  font-weight: bold;
}
.md-modal .md-content a:hover {
  color: #c0392b
}
.md-modal .md-content h3 {
  margin: 0;
  padding: 10px;
  text-align: center;
  font-family: 'Comfortaa', cursive;
  font-size: 24px;
  line-height: 36px;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 0 0;
}
.md-modal .md-content > div {
  padding: 15px 40px 30px;
  margin: 0;
  font-size: 14px;
}
.md-modal .md-content > div p {
  margin: 0;
  padding: 10px 0;
  font-family: inherit;
  text-align: left;
}
.md-modal .md-content > div ul {
  margin: 0;
  padding: 0 0 30px 20px;
}
.md-modal .md-content > div ul li {
  padding: 5px 0;
}
.md-modal .md-content button {
  display: block;
  margin: 0 auto;
  font-size: 12px;
}
/* Effect 9: 3D flip vertical */

.md-effect-9.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}
.md-effect-9 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-70deg);
  -moz-transform: rotateX(-70deg);
  -ms-transform: rotateX(-70deg);
  transform: rotateX(-70deg);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}
.md-show.md-effect-9 .md-content {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
}
<ul class="txt">
  <li><a href="#" class="md-trigger" data-modal="modal-about">Modal 1</a>
  </li>
</ul>

<div class="md-modal md-effect-9" id="modal-about">
  <div class="md-content">
    <h3>Modal 1</h3>
    <div>
      <p>Modal content <a href="#" class="md-trigger" data-modal="modal-credits">Modal 2</a>
      </p>
      <button class="md-close">Close</button>
    </div>
  </div>
</div>

<div class="md-modal md-effect-9" id="modal-credits">
  <div class="md-content">
    <h3>Modal 2</h3>
    <div>
      <p>Another content</p>
      <button class="md-close">Close</button>
    </div>
  </div>
</div>

<!-- the overlay element -->
<div class="md-overlay"></div>
<br type="_moz">


<script src="/core/script/modal/js/classie.js"></script>
<script src="/core/script/modal/js/modalEffects.js"></script>

更新

你将所有的转换设置为 0.3 秒，所以如果你想看到动画结束，你只需要在关闭后 0.3 秒运行 show modal

/** First JS script : classie.js **/

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 *
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

(function(window) {

  'use strict';

  // class helper functions from bonzo https://github.com/ded/bonzo

  function classReg(className) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  }

  // classList support for class management
  // altho to be fair, the api sucks because it won't accept multiple classes at once
  var hasClass, addClass, removeClass;

  if ('classList' in document.documentElement) {
    hasClass = function(elem, c) {
      return elem.classList.contains(c);
    };
    addClass = function(elem, c) {
      elem.classList.add(c);
    };
    removeClass = function(elem, c) {
      elem.classList.remove(c);
    };
  } else {
    hasClass = function(elem, c) {
      return classReg(c).test(elem.className);
    };
    addClass = function(elem, c) {
      if (!hasClass(elem, c)) {
        elem.className = elem.className + ' ' + c;
      }
    };
    removeClass = function(elem, c) {
      elem.className = elem.className.replace(classReg(c), ' ');
    };
  }

  function toggleClass(elem, c) {
    var fn = hasClass(elem, c) ? removeClass : addClass;
    fn(elem, c);
  }

  var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
  };

  // transport
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(classie);
  } else {
    // browser global
    window.classie = classie;
  }

})(window);




/** Second JS Script : modalEffects.js **/

/**
 * modalEffects.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var ModalEffects = (function() {

  function init() {

    var overlay = document.querySelector('.md-overlay'),
        opened;

    function removeModal(modal, hasPerspective) {
      classie.remove(modal, 'md-show');

      if (hasPerspective) {
        classie.remove(document.documentElement, 'md-perspective');
      }
    }

    [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el, i) {

      var modal = document.querySelector('#' + el.getAttribute('data-modal')),
        close = modal.querySelector('.md-close');


      function removeModalHandler() {
        removeModal(modal, classie.has(el, 'md-setperspective'));
        opened = undefined; // if close manually - clear opened
      }

      function showModal(){
        classie.add(modal, 'md-show');
        overlay.removeEventListener('click', removeModalHandler);
        overlay.addEventListener('click', removeModalHandler);

        if (classie.has(el, 'md-setperspective')) {
          setTimeout(function() {
            classie.add(document.documentElement, 'md-perspective');
          }, 25);
        }

      }
      
      el.addEventListener('click', function(ev) {
        if(opened){
          removeModal(opened.modal, classie.has(opened.el, 'md-setperspective'));
        }
        setTimeout(showModal, opened && 300 || 0);
        opened = {
          el:el, modal:modal
        }
      });

      close.addEventListener('click', function(ev) {
        ev.stopPropagation();
        removeModalHandler();
      });
      

    });

  }

  init();

})();
.md-modal *,
.md-modal *:after,
.md-modal *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.md-modal body,
.md-modal html {
  font-size: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Comfortaa', cursive;
}
/* Clearfix */

.md-modal .clearfix:before,
.md-modal .clearfix:after {
  content: " ";
  display: table;
}
.md-modal .clearfix:after {
  clear: both;
}
/* Header Style */

.md-modal .main,
.md-modal .container > header {
  margin: 0 auto;
  padding: 20px;
}
.md-modal .container > header {
  text-align: center;
  background: #d94839;
  padding: 30px;
}
.md-modal .container > header h1 {
  font-size: 28px;
  line-height: 42;
  margin: 0;
}
.md-modal .container > header span {
  display: block;
  font-size: 60%;
  opacity: 0.7;
  padding: 0 0 5px 1px;
}
/* Main Content */

.md-modal .main {
  max-width: 800px;
}
.md-modal .column {
  float: left;
  width: 50%;
  padding: 0 20px;
  min-height: 300px;
  position: relative;
}
.md-modal .column:nth-child(2) {
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1);
}
.md-modal .column p {
  font-size: 14px;
  padding: 0;
  margin: 0;
  text-align: right;
  line-height: 22px;
}
.md-modal button {
  font-weight: 400;
  border: none;
  padding: 8px 16px;
  background: #d3493b;
  color: #fff;
  font-family: 'Comfortaa', cursive;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  margin: 3px 2px;
  border-radius: 2px;
}
.md-modal button:hover {
  background: #c0392b;
}
@media screen and (max-width: 46.0625em) {
  .md-modal .column {
    width: 100%;
    min-width: auto;
    min-height: auto;
    padding: 10px;
  }
  .md-modal .column p {
    text-align: left;
    font-size: 14px;
  }
  .md-modal .column:nth-child(2) {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}
/* components */

.md-modal .md-perspective,
.md-modal .md-perspective body {
  height: 100%;
  overflow: hidden;
}
.md-modal .md-perspective body {
  background: #222;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
}
.md-modal .container {
  background: #a6ba89;
  min-height: 100%;
}
.md-modal {
  position: fixed;
  top: 150px;
  left: 50%;
  width: 50%;
  width: 400px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.md-show {
  visibility: visible;
}
.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible;
}
/* Content styles */

.md-modal .md-content {
  border: 1px solid #7a994d;
  font-family: 'Comfortaa', cursive;
  line-height: 22px;
  color: #fff;
  background: #a6ba89;
  position: relative;
  border-radius: 5px;
  margin: 0 auto;
}
.md-modal p {
  font-family: 'Comfortaa', cursive;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
}
.md-modal .md-content a {
  font-family: 'Comfortaa', cursive;
  color: #d3493b;
  text-decoration: none;
  margin: 0;
  padding: 2px;
  font-weight: bold;
}
.md-modal .md-content a:hover {
  color: #c0392b
}
.md-modal .md-content h3 {
  margin: 0;
  padding: 10px;
  text-align: center;
  font-family: 'Comfortaa', cursive;
  font-size: 24px;
  line-height: 36px;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 0 0;
}
.md-modal .md-content > div {
  padding: 15px 40px 30px;
  margin: 0;
  font-size: 14px;
}
.md-modal .md-content > div p {
  margin: 0;
  padding: 10px 0;
  font-family: inherit;
  text-align: left;
}
.md-modal .md-content > div ul {
  margin: 0;
  padding: 0 0 30px 20px;
}
.md-modal .md-content > div ul li {
  padding: 5px 0;
}
.md-modal .md-content button {
  display: block;
  margin: 0 auto;
  font-size: 12px;
}
/* Effect 9: 3D flip vertical */

.md-effect-9.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}
.md-effect-9 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-70deg);
  -moz-transform: rotateX(-70deg);
  -ms-transform: rotateX(-70deg);
  transform: rotateX(-70deg);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}
.md-show.md-effect-9 .md-content {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
}
<ul class="txt">
  <li><a href="#" class="md-trigger" data-modal="modal-about">Modal 1</a>
  </li>
</ul>

<div class="md-modal md-effect-9" id="modal-about">
  <div class="md-content">
    <h3>Modal 1</h3>
    <div>
      <p>Modal content <a href="#" class="md-trigger" data-modal="modal-credits">Modal 2</a>
      </p>
      <button class="md-close">Close</button>
    </div>
  </div>
</div>

<div class="md-modal md-effect-9" id="modal-credits">
  <div class="md-content">
    <h3>Modal 2</h3>
    <div>
      <p>Another content</p>
      <button class="md-close">Close</button>
    </div>
  </div>
</div>

<!-- the overlay element -->
<div class="md-overlay"></div>
<br type="_moz">


<script src="/core/script/modal/js/classie.js"></script>
<script src="/core/script/modal/js/modalEffects.js"></script>

关于javascript - 模态内的模态，切换下一个时无法关闭当前一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33655864/

上一篇：html - 使中央 div 倾斜且背景图像不倾斜，从而在页面中心下方创建垂直对 Angular 线效果

下一篇：html - ASP 菜单 float 属性不起作用

相关文章：

javascript - 等待函数返回

javascript - 在模式中从 span 的 id 加载点击的 span URL

jquery 遍历到父级以更改 css

javascript - jQuery 表单验证错误，无响应

javascript - Chrome 在处理错误时不会抛出警告框

javascript - 如何在 NicEdit 中设置在新窗口中打开链接的默认值

javascript - 给定一个变量名称数组/列表，如果变量为 null，则将所有变量名称打印为字符串

javascript - 将 jQuery 验证器的 valid() 或 element() 方法与远程方法一起使用

html - 在初始规则集中包含伪类样式

javaScript改变字符串字符的位置

©2024 IT工具网  联系我们