一页上具有相同结构的多个模态
[英]Multiple Modals with same structure on one page
问题描述
我一直在探索如何使用类似于以下代码笔的示例制作香草模态： 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 个解决方案
解决方案1
2 已采纳 2017-08-24 02:59:37
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指定的正确模式并进行显示。
// 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"); });
/** * 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; }
<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>
解决方案2
0 2017-08-24 03:03:07
我使用：target通过纯CSS实现所需的结果。
您可以根据需要添加任意数量的模态，只要它们具有不同的ID和链接到该ID的按钮即可。
我将空锚标签与z-index堆栈一起使用，以创建可点击的叠加层-模态后面的深色-仅在模态打开时才会显示。 单击叠加层将关闭模式。
该模态内部还有一个单独的关闭按钮。
当模式关闭时，它不会干扰主体内容。
function newwin() { myWindow = window.open('lead_data.php?leadid=1', 'myWin', 'width=400,height=650') }
/* 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 }
<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="#">×</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="#">×</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="#">×</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="#">×</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="#">×</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>
一页中的多个模态
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.