javascript - Multiple Modals with same structure on one page -
i've been exploring how can make vanilla modals using example codepen: https://codepen.io/brandonb927/pen/wjaii/ .
the problem universally every example i've seen relay on targeting class or id names. want can have multiple modals this:
<div class="modal"> <a href="#" class="toggle-modal">toggle modal</a> <div class="modal-content"> <p>this first modal content</p> </div> </div> <div class="modal"> <a href="#" class="toggle-modal">toggle modal</a> <div class="modal-content"> <p>this second modal content</p> </div> </div> both of modals have exact same class names , formatting different content. possible target individual modals when share class names? javascript "this"?
if provide working snippet, jquery fine, great :d thanks.
if there "modal.js" javascript plugin (preferably jquery) lets me accomplish in simple way, awesome too. again, appreciate example though.
bootstrap specifying data-target property on triggering button. this:
<button class="modal-toggle" data-element="two">show modal 2</button> where data-element="two" points modal shown:
<div class="modal" id="two"> now minor changes click event handler can select correct modal specified in data-element , show it.
// quick & dirty toggle 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`... things - http://cbrac.co/rqrdl5 */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /** * 1. force vertical scrollbar - http://cbrac.co/163mspb * note: use `text-rendering` caution - http://cbrac.co/sjt8p1 * note: avoid webkit anti-aliasing trap - http://cbrac.co/tadhbh * note: ie windows phone 8 ignores `-ms-text-size-adjust` if * viewport <meta> tag used - http://cbrac.co/1cfravl */ html { font-size: 100%; overflow-y: scroll; /* 1 */ min-height: 100%; } /** * 1. inherits percentage declared on above <html> base `font-size` * 2. unitless `line-height`, acts 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 sits above 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: 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 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 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>wiki
Comments
Post a Comment