在一个页面上具有相同结构的多个模态

时间：2017-08-24 02:44:21

标签： javascript jquery html css

我一直在探索如何使用像这个代码集https://codepen.io/brandonb927/pen/wJaIi/这样的例子制作香草模态。

我见过的每个例子普遍存在的问题是它们会针对目标类或ID名称进行转发。我想要一些我可以拥有多种模态的东西：

<div class="modal">
  <a href="#" class="toggle-modal">Toggle Modal</a>
  <div class="modal-content">
    <p>This is the first modal content</p>
  </div>
</div>
<div class="modal">
  <a href="#" class="toggle-modal">Toggle Modal</a>
  <div class="modal-content">
    <p>This is the second modal content</p>
  </div>
</div>

两个模态都具有完全相同的类名和格式，但内容不同。即使它们共享类名，是否有可能将这样的单个模态作为目标？你能用javascript“this”这样做吗？

如果你能提供一个工作片段，jquery很好，那就太棒了：D谢谢。

如果有一个“modal.js”javascript插件（最好是jQuery）让我以一种简单的方式实现这一点，那也是很棒的。同样，我会欣赏一个例子。

2 个答案:

答案 0 :(得分：2)

Bootstrap通过在触发按钮上指定data-target属性来完成此操作。像这样：

<button class="modal-toggle" data-element="two">Show modal 2</button>

data-element="two"指向要显示的模态：

<div class="modal" id="two">

现在对click事件处理程序进行一些细微更改，您可以选择data-element中指定的正确模态并显示它。

＆＃13;
＆＃13; 
// Quick & dirty toggle to demonstrate modal toggle behavior
$('.modal-toggle').on('click', function(e) {
  e.preventDefault();
  
  var elementID = $(this).attr("data-element");
  $('.modal#' +elementID ).toggleClass('is-visible');
});

$(".modal-close").on("click", function(e) {
  e.preventDefault();
  $(".modal").removeClass("is-visible");
});
＆＃13; 
/**
 * Box model adjustments
 * `border-box`... ALL THE THINGS - http://cbrac.co/RQrDL5
 */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * 1. Force a vertical scrollbar - http://cbrac.co/163MspB
 * NOTE: Use `text-rendering` with caution - http://cbrac.co/SJt8p1
 * NOTE: Avoid the webkit anti-aliasing trap - http://cbrac.co/TAdhbH
 * NOTE: IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the
 *       viewport <meta> tag is used - http://cbrac.co/1cFrAvl
 */

html {
  font-size: 100%;
  overflow-y: scroll; /* 1 */
  min-height: 100%;
}

/**
 * 1. Inherits percentage declared on above <html> as base `font-size`
 * 2. Unitless `line-height`, which acts as multiple of base `font-size`
 */

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1em;   /* 1 */
  line-height: 1.5; /* 2 */
  color: #444;
}

/* Page wrapper */
.wrapper {
  width: 90%;
  max-width: 800px;
  margin: 4em auto;
  text-align: center;
}

/* Icons */
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  fill: currentcolor;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.333;
  text-rendering: optimizeLegibility;
}

/**
 * Modals ($modals)
 */

/* 1. Ensure this sits above everything when visible */
.modal {
    position: absolute;
    z-index: 10000; /* 1 */
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
}

.modal.is-visible {
    visibility: visible;
}

.modal-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsla(0, 0%, 0%, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
}

.modal.is-visible .modal-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.modal-wrapper {
  position: absolute;
  z-index: 9999;
  top: 6em;
  left: 50%;
  width: 32em;
  margin-left: -16em;
  background-color: #fff;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
}

.modal-transition {
  transition: all 0.3s 0.12s;
  transform: translateY(-10%);
  opacity: 0;
}

.modal.is-visible .modal-transition {
  transform: translateY(0);
  opacity: 1;
}

.modal-header,
.modal-content {
  padding: 1em;
}

.modal-header {
  position: relative;
  background-color: #fff;
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
  border-bottom: 1px solid #e8e8e8;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1em;
  color: #aaa;
  background: none;
  border: 0;
}

.modal-close:hover {
  color: #777;
}

.modal-heading {
  font-size: 1.125em;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.modal-content > *:first-child {
  margin-top: 0;
}

.modal-content > *:last-child {
  margin-bottom: 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <div class="wrapper">
    <h1>Simple jQuery Modal</h1>
    <button class="modal-toggle" data-element="one">Show modal 1</button>
    <button class="modal-toggle" data-element="two">Show modal 2</button>
  </div>
  
  <div class="modal" id="one">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-wrapper modal-transition">
      <div class="modal-header">
        <button class="modal-close modal-toggle"><svg class="icon-close icon" viewBox="0 0 32 32"><use xlink:href="#icon-close"></use></svg></button>
        <h2 class="modal-heading">This is modal 1.</h2>
      </div>
      
      <div class="modal-body">
        <div class="modal-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
          <button class="modal-close">Close</button>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="modal" id="two">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-wrapper modal-transition">
      <div class="modal-header">
        <button class="modal-close modal-toggle"><svg class="icon-close icon" viewBox="0 0 32 32"><use xlink:href="#icon-close"></use></svg></button>
        <h2 class="modal-heading">This is modal 2.</h2>
      </div>
      
      <div class="modal-body">
        <div class="modal-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
          <button class="modal-close">Close</button>
        </div>
      </div>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我使用:target通过纯CSS获得所需的结果。

您可以根据需要添加任意数量的模式，只要它们具有不同的ID和链接到该ID的按钮。

我使用带有z-index堆叠的空锚标签来创建可点击的叠加层 - 模态后面的深色 - 仅在模态打开时显示。单击叠加层将关闭模式。

模态内部还有一个单独的关闭按钮。

当模态关闭时，它不会干扰身体内容。

＆＃13;
＆＃13; 
function newwin() {
  myWindow = window.open('lead_data.php?leadid=1', 'myWin', 'width=400,height=650')
}
＆＃13; 
/* essential code */

a {
  margin: 0 5px;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .5);
  transition: all ease 1s;
}

.closeoverlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  display: block;
  z-index: 2;
  position: fixed;
  cursor: pointer;
}

.closebutton {
  color: red;
  text-decoration: none;
  font-size: 30px;
  margin: 0 auto;
  display: table;
}

.modal:target {
  opacity: 1;
  pointer-events: auto;
}

.modal:target>.closeoverlay {
  display: block;
}

.modal>div {
  width: 300px;
  height: 500px;
  max-width: 75vw;
  max-height: 75vh;
  text-align: center;
  position: relative;
  background: #131418;
  z-index: 3
}

.wrap,
.modal {
  display: flex;
  align-items: center;
  justify-content: center
}

.modal-content {
  overflow-y: auto
}


/*demo fluff */

p {
  color: white;
  font-size: 20px;
  display: block;
}

button {
  margin: 2em 0 0 0;
  cursor: pointer;
}

.closebutton:hover {
  color: white;
  cursor: pointer;
}

.clutter,
.modal-content p {
  margin: 2em auto;
  padding: 40px;
  max-width: 100%;
  text-align: justify;
}

.clutter {
  width: 400px
}
＆＃13; 
<div class="wrap">
  <a href="#a"><button>Open Modal A</button></a>
  <a href="#b"><button>Open Modal B</button></a>
  <a href="#c"><button>Open Modal C</button></a>
  <a href="#d"><button>Open Modal D</button></a>
  <a href="#e"><button>Open Modal E</button></a>
  <div id="a" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <p>Modal A</p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
  <div id="b" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <p>Modal B</p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
  <div id="c" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <p>Modal C</p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
  <div id="d" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <p>Modal D</p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
  <div id="e" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <p>Modal E</p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
</div>
<div class="clutter">Bacon ipsum dolor amet shoulder sausage rump venison kevin prosciutto salami shank. Venison salami flank doner burgdoggen, shoulder beef sausage swine alcatra short loin pig chuck. Pastrami sirloin shoulder, swine frankfurter beef strip steak sausage
  salami tri-tip. Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl picanha flank drumstick pancetta. Turkey shoulder cupim rump
  ball tip strip steak turducken tri-tip biltong pork doner. Turducken leberkas chuck filet mignon bresaola picanha ball tip pig ground round shankle. Shank pork ribeye fatback, capicola pork loin tri-tip porchetta biltong landjaeger ham hock hamburger.
  Strip steak pork chop sirloin</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题