无法在 Firefox 中滚动大模式
Can't scroll big modal in Firefox
我有这个模态解决方案。在 Chrome 和 Edge 中运行良好，但在 Firefox 浏览器中存在缺陷。
如果模态高于屏幕，则完整模态应该是可滚动的，而 body 应该不是。唉，我只能用滚动条向右滚动模态，不能用鼠标滚轮。
编辑
这在 Whosebug 上的 Firefox 浏览器中运行良好，但 codepen debug 上的相同代码不起作用！
console.clear();
;(function(d) {
"use strict";
d.addEventListener('click', function(e) {
var el = e.target.closest('[data-modal-trigger]')
if (el) {
var selector = el.dataset.modalTrigger;
Array.from(d.querySelectorAll(selector)).forEach(function(el) {
el.classList.add('active');
})
d.documentElement.classList.add('with-modal')
}
var el1 = e.target.closest('.modal-close');
var el2 = e.target.closest('.modal-backdrop');
if (el1 || el2) {
e.target.closest('.modal').classList.remove('active')
d.documentElement.classList.remove('with-modal')
}
})
})(document);
html.with-modal body {
height: 100vh;
overflow-y: hidden;
padding-right: 17px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0s 1s;
transition: opacity 0s 1s;
overflow-y: scroll;
}
.modal.active {
opacity: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
pointer-events: all;
}
.modal-backdrop {
z-index: -1;
position: fixed;
top: 0;
right: 17px;
bottom: 0;
left: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 0.2s 0.3s linear;
transition: opacity 0.2s 0.3s linear;
pointer-events: none;
}
.modal.active .modal-backdrop {
opacity: 1;
pointer-events: all;
}
.modal-window {
background-color: #fff;
flex-basis: auto;
width: auto;
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
border: 1px solid;
position: relative;
top: 25px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
margin: auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-align: stretch;
align-items: stretch;
padding: 20px;
opacity: 0;
}
.modal.active .modal-window {
flex-basis: content;
top: 0;
opacity: 1;
}
.modal-content {
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
}
.modal-close {
flex-basis: 40px;
padding: 10px;
box-sizing: border-box;
background-color: pink;
margin-left: auto;
color: red;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
cursor: pointer;
}
button {
border: 2px solid;
border-radius: 10px;
padding: 10px 20px;
background-color: lightgreen;
font-size: 20px;
margin: auto;
text-align: center;
}
<button data-modal-trigger="#my-modal">Click for modal</button>
<div class="region-modal">
<div class="modal" id="my-modal">
<div class="modal-window">
<div class="modal-close">Close</div>
<div class="modal-content">
<h2>My Modal</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos voluptatibus asperiores dolorem dicta veniam? Voluptatum reprehenderit maxime in perferendis sequi?</p>
<p>Id odit doloribus culpa perspiciatis reprehenderit pariatur labore magni fuga eos. Ipsum hic consequuntur delectus? Sapiente tempore dolorem eos aliquid!</p>
<p>Voluptatibus enim velit quasi vitae dolor sapiente ab excepturi iste, quos adipisci id ad quidem atque omnis amet! Eos, eligendi.</p>
<p>Nam culpa quo incidunt quaerat iure itaque, porro hic aperiam ducimus? Vel tempora unde nulla quisquam nisi facere expedita deserunt.</p>
<p>Sunt, minus tempore dignissimos pariatur eos modi at minima culpa nisi debitis ipsam nihil recusandae illum unde magni hic sint!</p>
<p>Veritatis minima excepturi nisi! Ex consectetur, asperiores iste laudantium voluptatem enim, possimus quae porro modi corporis pariatur, non est ratione!</p>
<p>Est consequatur amet dignissimos quibusdam veniam? Commodi qui voluptatum facilis hic? Quasi itaque illo facilis reiciendis, soluta sit maxime delectus?</p>
<p>Explicabo eos neque dolore similique illo illum soluta nulla eveniet! Facilis et ipsa quia asperiores vitae, dignissimos adipisci necessitatibus sed.</p>
<p>Corporis cumque est, nihil omnis possimus consequatur recusandae magnam quod, officia aut odio dolores distinctio nostrum et vitae, consequuntur provident?</p>
<p>Ipsam, quisquam ea magnam autem possimus, rem tempore doloribus, in amet ullam debitis facilis tenetur voluptas labore. Aperiam, quam libero?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, accusantium.</p>
<p>Numquam ea sint debitis voluptatem fuga tempore repudiandae architecto minima.</p>
<p>Quidem explicabo consequatur obcaecati quia nisi quisquam! Eligendi, vero dolor.</p>
<p>Eum cumque perspiciatis praesentium quae provident nobis, excepturi inventore culpa?</p>
<p>Veniam doloremque cupiditate repellat totam, dignissimos unde eaque mollitia a.</p>
<p>Dignissimos consequatur voluptatibus provident velit! Ea voluptas quia iste saepe?</p>
<p>Saepe, fugit cupiditate possimus enim veritatis repudiandae molestias accusamus iure?</p>
<p>Illo unde obcaecati repellendus tenetur, quam doloremque commodi voluptas sit?</p>
<p>Quibusdam velit enim totam amet quasi aperiam repudiandae beatae quia.</p>
<p>Corrupti repellat deleniti aliquid exercitationem! Magni repellendus ipsum quas minus.</p>
<p>Dolor nesciunt ducimus corporis illo dolores deleniti asperiores numquam inventore?</p>
<p>Ratione omnis cum labore consectetur sequi quam, facere qui rem.</p>
<p>Ratione nostrum quia ex quod debitis distinctio iure eligendi eum!</p>
<p>Sunt repudiandae omnis accusantium quidem ipsam corrupti ipsa at vel!</p>
<p>A quasi fugit animi ullam. Dolor dolore incidunt libero velit.</p>
<p>Optio ducimus officia dolor quis, consectetur numquam blanditiis asperiores magnam?</p>
<p>Porro aspernatur suscipit officiis veritatis a quo, earum eos sapiente!</p>
<p>Magnam hic veritatis at. Iste tempora fugit quaerat deserunt qui?</p>
<p>Temporibus excepturi iste harum recusandae aliquid omnis corporis rem iure.</p>
<p>Fugit aut placeat facere suscipit. Magni amet sunt omnis quisquam?</p>
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</div>
<h1>Scroll and modal</h1>
<p>Some scrolling content</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam delectus excepturi, fuga adipisci, deserunt culpa recusandae doloremque debitis non doloribus magnam reprehenderit maxime aut quaerat quam possimus fugit, voluptatem ab beatae reiciendis aperiam error. Explicabo quas necessitatibus cum enim vitae! Dicta maxime ea nam iusto ab reprehenderit placeat blanditiis numquam quam voluptates itaque, commodi aliquid deleniti natus dolorum unde sint. In quasi incidunt iure, repudiandae reiciendis inventore voluptatem modi facilis tempora maxime atque reprehenderit minus dolores neque exercitationem? Quisquam animi alias laudantium esse dicta molestiae ullam ipsum delectus culpa nemo nobis deserunt id, dolore minus. Perferendis ratione libero voluptate tempore fugiat modi, excepturi labore unde soluta ipsa asperiores molestias, corporis sapiente voluptatem distinctio nobis architecto. Ut facere sapiente ipsam inventore tempore architecto tempora officiis, laboriosam natus ea itaque consequatur. Error eum repellendus, perferendis deleniti qui quam voluptatem sint in sapiente eaque illo facilis minus ducimus ex officiis laudantium officia soluta suscipit debitis, recusandae eligendi, unde consectetur facere quasi. Neque corrupti asperiores deserunt eos corporis minima ex. Et a fuga in porro aspernatur quis veniam, repudiandae voluptatum eligendi cumque delectus, iusto voluptatem fugit maiores molestiae vel dolore impedit error. Vitae illo doloremque error totam id et veritatis earum eligendi placeat iste!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Magni illo animi maxime deleniti dolorem a, reprehenderit aut hic iure! Ipsam, eaque voluptates? Voluptates, cum porro. Rerum deserunt iste labore mollitia expedita doloribus reprehenderit eos quae ducimus debitis fugiat quasi molestias in illum accusamus quisquam ipsum dicta eius nemo modi, adipisci unde incidunt! Repellendus ad nihil fuga tempora nobis? Magni omnis, ea alias pariatur eligendi doloribus, adipisci laborum possimus maxime provident esse! Ullam similique ducimus quod unde culpa ipsa illum nisi aut aspernatur consequuntur assumenda neque nihil quam ipsum, eius suscipit eligendi. Optio est, illo aut reiciendis alias corporis! Dolorum omnis facilis similique labore ab laboriosam repudiandae magnam voluptatibus, iusto praesentium! Illum laudantium consectetur molestiae nulla voluptatibus consequuntur? Quas natus iure harum praesentium deleniti rem fuga quidem, sit sequi. Quod consequatur voluptatibus quas unde officia laborum expedita quaerat vero, facilis, nemo excepturi nobis iure repellat explicabo eius atque accusamus ex tempore. Cumque aliquam mollitia, provident iste quasi maxime, quod voluptatum fugit at accusantium vitae. Aperiam soluta nobis iusto incidunt non aspernatur nihil cumque eum vero commodi animi in, quasi deleniti doloremque earum reprehenderit officiis praesentium. Totam illum quod dolorum sequi placeat temporibus odit quis, doloribus ratione repellendus? Itaque et fuga illo cumque aliquam voluptatem magni laudantium fugiat nemo obcaecati.</p>
<p>Est iure, laboriosam sint quibusdam corrupti magni a minus repudiandae, incidunt autem consequuntur dolorem cumque eaque, nulla facere illum veritatis. Voluptatibus rerum fugiat iusto hic animi distinctio. Officiis, atque. Laboriosam excepturi iure quaerat exercitationem architecto optio laudantium, id amet dolores fugit ullam harum itaque nesciunt, at enim neque quam consectetur eveniet! Libero ex quos pariatur quaerat esse quas dolore praesentium in ipsam ab aut at expedita nam a soluta consequatur ducimus iusto rem voluptate laborum, dolorum quod veniam? Nihil accusamus quis ratione nemo beatae provident sequi ea ipsam quia explicabo quasi molestias voluptatum eius nostrum, modi sunt voluptate! Perspiciatis vitae voluptatibus quos ea optio perferendis minus repellendus a, ut tempora maiores beatae! Tempora impedit nesciunt ab dolore odit ipsa quia soluta illum! Explicabo dolorem molestiae fuga blanditiis, fugit commodi vitae ab non! Itaque veniam facere pariatur eius saepe ipsam incidunt numquam deleniti similique tempora? Doloribus natus architecto nulla vitae ullam ipsam fugiat maiores officia deleniti a, iure asperiores esse velit alias culpa? Nisi obcaecati, iste sequi officiis aliquam aut commodi vitae consequatur ea molestias sint eligendi ut dolore eveniet consectetur laborum quos natus cum quia molestiae explicabo id. A excepturi cumque porro vero nulla voluptate harum atque animi deleniti voluptas?</p>
<p>Ipsa esse dolor, dicta quis quod hic fugit quaerat repudiandae nobis cum voluptatem expedita amet tempora sed atque repellendus, cumque consequuntur iste adipisci quae aliquam ex sapiente corrupti? Quia numquam obcaecati nesciunt. Nisi quis cupiditate obcaecati at, nesciunt quae ipsum repellendus distinctio facilis ut architecto repellat explicabo impedit hic ex recusandae cum excepturi quisquam beatae sint fugiat, laboriosam blanditiis ratione. Veritatis accusamus quis totam et dignissimos, deserunt cumque quisquam amet eveniet ratione error autem ipsa maxime ducimus, voluptate, architecto nemo incidunt molestiae id. Saepe necessitatibus ipsam ad atque ullam quisquam maxime, soluta nemo voluptates corrupti mollitia praesentium, aliquam rem facilis ipsum deserunt perspiciatis autem animi quia commodi possimus! Consequuntur in nam sit hic temporibus aliquam. Amet alias, nobis exercitationem, veritatis nesciunt sit necessitatibus doloremque fugiat ullam rerum quia libero. Iste quaerat, totam labore qui provident eum sunt dolorem fugit facere dolorum quasi rem! Iste velit obcaecati aliquam maxime totam animi, harum labore vitae quos voluptates culpa earum quo, quibusdam explicabo eius nesciunt assumenda nulla natus, quae non ut dolorum nemo hic! Neque blanditiis molestiae esse ad laudantium, cum nostrum non alias nihil! Neque nostrum quam iste commodi consequatur obcaecati quibusdam ipsa corporis ut exercitationem rerum minima, facere aspernatur praesentium vitae.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Necessitatibus, deserunt vero aut reiciendis omnis adipisci in aspernatur officia exercitationem, fuga perferendis alias maxime eum odio! Officia, exercitationem? Magnam cum sequi at totam distinctio libero animi non doloribus odio quisquam commodi quaerat, culpa cupiditate voluptatum impedit sapiente reprehenderit odit aspernatur. Quasi mollitia saepe commodi tempora inventore adipisci voluptatem eius et aperiam nemo maiores ipsam corrupti, impedit numquam repudiandae illo voluptate! Error nihil repellendus numquam similique cum in assumenda eligendi accusantium, saepe, consequuntur repudiandae neque fugiat aperiam delectus vero eum atque! Hic nostrum deleniti quos rem velit ad pariatur sit recusandae distinctio corrupti, et fugiat. Beatae nobis obcaecati esse fugit at culpa consectetur, accusamus suscipit necessitatibus, maxime pariatur ipsa? Suscipit quaerat pariatur accusamus debitis vitae neque eos odio, quod qui ad, explicabo quae rem necessitatibus sunt corrupti deserunt minima voluptatem laudantium obcaecati illum aliquid velit doloremque molestias? Hic fuga debitis explicabo neque quaerat ratione est totam cumque eius tempore necessitatibus at eos, sequi veritatis perferendis numquam ducimus sit nisi iusto doloribus. Dolor a doloremque maiores ipsum expedita? Deleniti deserunt delectus iste iusto aspernatur quo, dolorem ipsum, modi nulla, accusamus quam a eius natus nisi id in neque explicabo nesciunt at harum labore eaque ratione molestias! Officiis delectus facere error tenetur?</p>
<p>Magni possimus necessitatibus voluptate nobis voluptatibus minima odio atque at neque similique natus, totam obcaecati harum qui? Vero molestiae laborum accusantium reprehenderit consectetur, nobis veniam ea praesentium vel soluta hic, dolore assumenda, accusamus fugit voluptatum totam delectus ut minima at autem nam dignissimos illum veritatis explicabo? Explicabo harum animi commodi adipisci ab totam expedita. Cum atque maiores perspiciatis. Similique eos commodi, rem, tenetur placeat reprehenderit unde fugit, qui at sed corrupti! Sapiente, minus sint possimus itaque facere, voluptate illo officiis nesciunt accusantium recusandae maxime blanditiis doloribus. Odit asperiores quis illo quasi obcaecati ipsa, commodi beatae labore voluptates, vel quo neque, enim reprehenderit iste rerum debitis quisquam! Esse, maiores atque! Maxime eligendi eaque delectus eum, aut necessitatibus ad? A, accusamus! Quos, harum pariatur nostrum delectus dolores corrupti, repellendus vel blanditiis rem laboriosam laudantium quam perspiciatis incidunt dignissimos voluptatibus, minus voluptas ducimus fugit veritatis similique. Repudiandae possimus autem quod! Repudiandae eos perferendis libero nihil, dolores harum. Dolorum eos eligendi sequi odit at molestias mollitia libero nemo illum, excepturi, in temporibus, necessitatibus velit officia nam quidem laudantium dolore delectus non aliquam. Hic libero earum consequatur maiores nesciunt sequi, atque reprehenderit ipsa quos odit unde aperiam omnis, vitae quod, laborum accusantium perspiciatis dolorum ratione?</p>
<p>Sunt dolore ratione excepturi tempore voluptatum voluptas consequatur reiciendis, harum eaque mollitia beatae natus dolorem dolorum atque at consequuntur quaerat. Mollitia, iusto dicta. Nulla ea dolores similique aliquid possimus, pariatur a saepe iusto aut veritatis voluptatibus assumenda animi nam nobis esse tempore, asperiores numquam maiores. Consequuntur saepe fugiat ipsum excepturi, non corporis eum aut dignissimos. Consequatur nesciunt laborum earum consectetur reprehenderit voluptate molestias quidem, deleniti quae tempore sequi. Tempora architecto a accusantium odio voluptates aliquam autem suscipit provident sit asperiores incidunt illum ducimus facilis, molestias, inventore mollitia! Atque provident odio soluta deserunt quisquam tenetur quae molestias magnam ex, sed culpa nulla fuga corporis vero maxime quidem mollitia facere. Illo et non perspiciatis consequatur nobis temporibus eveniet nulla aut quae animi facilis veritatis minus, recusandae fugiat odit atque! Natus beatae velit possimus repellendus, perspiciatis vero culpa voluptatem quia atque quos doloribus nostrum fuga cum ea. Accusamus officia numquam praesentium sapiente! Tenetur sed harum itaque maxime ea velit, dolor doloremque soluta natus libero tempore similique adipisci optio dolorem aut accusamus in ut vel quaerat, inventore veniam quis. Explicabo, ipsum temporibus saepe ad, libero consectetur adipisci amet quaerat placeat rem sit dolore fugiat cupiditate porro quod commodi expedita totam veniam. Reiciendis, consequuntur nostrum!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Voluptas odit dicta laudantium temporibus unde nesciunt repellendus asperiores incidunt consectetur! Accusantium quis dolorum eveniet quos atque voluptas amet! Iure quo nam alias, veniam hic totam quia voluptates dolorem quibusdam eum fuga enim sunt laudantium velit, ducimus doloremque omnis quae delectus explicabo quis sed. Voluptate, eius fugiat odio minima sapiente ut illo error molestiae, repellat exercitationem nesciunt sit iste earum provident reprehenderit? A, distinctio. Cupiditate magni eius eligendi atque et rerum dicta illo sequi voluptates esse dolores, ducimus corporis laudantium in eos accusantium temporibus delectus vel quidem dolor repudiandae numquam libero officiis non? Commodi nostrum doloribus officiis hic doloremque, corporis rerum harum dolore eum quia voluptatibus inventore at sapiente consequatur laudantium quos quaerat vero? Voluptates modi ut totam aliquid laudantium consequuntur beatae odio tempore iusto officiis exercitationem, animi quos, dignissimos voluptatibus quas ad eaque. Nam, repellendus numquam veniam excepturi inventore iusto non accusantium eaque corporis laboriosam ipsa at modi recusandae atque perspiciatis. Ab doloribus animi unde eaque cumque esse, sint qui suscipit earum magni provident labore, velit, ipsam inventore veniam reiciendis officia voluptas sequi quisquam impedit? Ut laborum magnam a iusto? Assumenda quidem expedita laudantium vero! Quos soluta, magni nemo ipsa ratione incidunt eius nihil facilis? Rerum corporis iure eligendi.</p>
<p>Inventore obcaecati reprehenderit, corporis repellendus, possimus velit vel alias, id voluptate eaque voluptatem numquam eveniet nostrum? Ab vel, illo consectetur quas beatae repudiandae error vero quam dolorum quasi velit aut iure! Totam nemo perferendis velit quidem adipisci reprehenderit molestias optio pariatur doloremque reiciendis repellat repellendus blanditiis error a ratione laudantium nobis aliquam, dolorem numquam porro sapiente. Amet inventore corporis suscipit natus est sunt, laborum excepturi rerum, quasi sequi commodi placeat officiis nobis. Voluptate, error odit! Blanditiis laborum, nihil quo quas reprehenderit aspernatur cupiditate explicabo! Sint magnam nesciunt eligendi nostrum cumque, dolor saepe est quidem nihil consectetur, laborum soluta, accusamus doloremque. Rerum modi sapiente aliquam dolore itaque, voluptatibus tempore atque consequuntur maxime omnis recusandae quo quaerat laborum aspernatur possimus dolorem earum adipisci, non, excepturi quia! Iusto et repellendus inventore eligendi magnam, quae beatae numquam aliquam animi incidunt officia similique qui cumque. Fugit est deserunt rerum, assumenda eligendi, voluptatibus corporis sed qui minus doloribus officia esse sit sint earum veniam. Magnam ipsum ipsam aliquam doloribus magni a perspiciatis qui beatae blanditiis dolorum, aliquid nemo impedit omnis numquam expedita mollitia, quos assumenda necessitatibus quas. Ipsam rem voluptas delectus ipsa ratione! Optio, distinctio dicta. Unde id harum dolorem sed velit, impedit distinctio dignissimos error.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Laborum exercitationem quas ex! Nostrum quaerat eaque itaque repudiandae expedita dolores sapiente quia non hic obcaecati, tempora error quo facilis ut quas adipisci voluptatum voluptate, qui temporibus! Eveniet corporis molestiae sapiente, omnis nostrum quod consectetur at error velit aspernatur vero non illum quidem voluptates laboriosam molestias! Porro nobis, soluta cum laboriosam dolore delectus amet reprehenderit adipisci! Quis enim praesentium officiis voluptatum quasi, totam corporis vero sit, laboriosam beatae, nam ab! Molestias id amet impedit maxime cupiditate iure officiis, ad ipsum ipsam excepturi corrupti praesentium velit repellendus quo facilis? Officia recusandae nobis nemo fugiat iste id explicabo asperiores non quis rerum tempora repellendus necessitatibus error unde quam ea ratione autem quaerat est hic quia deserunt, doloremque aspernatur. Quos inventore enim perspiciatis illum voluptatibus officia voluptas molestiae eveniet consectetur eos voluptatem, tempore necessitatibus eius mollitia reiciendis aut ullam aspernatur aliquid nihil expedita nisi accusantium sunt quam dolorum. Natus sit sequi itaque ut, ex, maiores aspernatur magni nostrum ad ratione assumenda qui hic? Similique molestiae aperiam quae laudantium pariatur quibusdam, quidem provident ducimus, modi blanditiis sed? Recusandae, iure? Nihil laborum rerum adipisci tenetur aspernatur quas asperiores. Deserunt amet, veniam doloremque pariatur nisi et quis commodi voluptates error cumque modi inventore optio, tempore fugiat.</p>
<p>Totam, quod et tenetur officiis consequuntur laboriosam provident dicta unde placeat, expedita ad sit voluptas molestiae ipsam voluptatibus omnis, magni id sunt esse modi distinctio exercitationem? Saepe unde repudiandae enim dolor explicabo possimus vel quisquam cumque. Minus dolorem vitae, qui at facilis dicta tenetur quos aut corrupti nisi doloremque asperiores ab sint hic, laudantium eveniet. Alias iste tempora obcaecati dignissimos delectus nesciunt tenetur mollitia eum architecto officiis quas odit, quo magni, beatae accusamus asperiores eius facere, corrupti provident earum dicta laboriosam blanditiis esse libero! Aspernatur omnis iste sit, magni facere possimus ea provident officiis rerum ducimus similique natus neque suscipit incidunt repellat perspiciatis, itaque iure. Pariatur nesciunt libero rerum inventore? Nobis aperiam, nostrum odio facilis id animi atque provident hic dolorem quas fugit earum velit ratione qui ipsam repellendus ut sit omnis facere libero ex neque? Provident error ducimus modi magnam fuga, ex eveniet omnis earum sed magni at asperiores harum, veniam quidem perferendis. Dicta ab voluptates ipsum quas expedita eligendi voluptate praesentium, consequuntur harum qui eum veniam maiores in molestiae aliquid, totam quod officiis asperiores ex necessitatibus. Saepe porro unde dicta beatae consectetur provident quidem suscipit, sed laborum sit, doloribus expedita mollitia aliquam adipisci necessitatibus pariatur veniam laudantium sequi?</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Aperiam, fugit ipsam. Minus quaerat nesciunt eum iure architecto, exercitationem laudantium corporis quos quam odio repellendus, accusamus qui dolor vitae numquam suscipit debitis, amet eaque perferendis quasi doloremque. Sit sapiente nihil corporis mollitia placeat tenetur eius fuga quisquam quam, dignissimos, possimus aspernatur. Praesentium magnam obcaecati, vitae deserunt inventore dolorem aspernatur impedit laboriosam quae deleniti nesciunt, animi amet totam est eum delectus incidunt id quisquam sapiente labore sint ad ipsa dignissimos. Officia ipsum quis minus sapiente corrupti quasi eius iste unde distinctio ducimus voluptatum vitae perferendis, iusto cupiditate optio laborum veniam ex dolorum, dolores omnis! Repellat perspiciatis quidem, molestiae reprehenderit a aliquam, modi obcaecati voluptatum, iste expedita itaque non. Error atque fugiat sunt ab. Ullam, ipsam id! Sunt fugit maxime incidunt illum reprehenderit deserunt qui iste quisquam natus labore eveniet ut porro ab eos commodi consequuntur eum delectus quaerat, molestias, architecto obcaecati. Unde aliquam exercitationem numquam corrupti recusandae autem ratione animi voluptas. Laborum adipisci aperiam consequuntur dolorum dolor aspernatur rerum cum impedit harum vel, animi quaerat, magnam consectetur optio sunt assumenda! Eius tenetur nam fugiat voluptatibus dignissimos ipsum, aperiam sint delectus ab, reiciendis in voluptatem tempore optio. Numquam mollitia quis vero sequi, nisi tempore fuga ducimus doloremque a nostrum, praesentium id.</p>
<p>Consequatur, velit, fuga harum nam quod commodi esse tempora laboriosam exercitationem reiciendis veniam, fugit expedita. Vitae, doloremque? Ex similique saepe perferendis iste autem veniam aliquid, harum minus? Molestias nobis eaque inventore saepe similique et vero autem eveniet repellendus. Excepturi magnam dignissimos, consectetur unde in expedita praesentium possimus consequuntur quaerat corporis beatae nobis minus. Molestias, harum ut! Dolores distinctio, quo placeat nam obcaecati cupiditate voluptatem nemo? A suscipit placeat quas iusto impedit. Libero ipsam excepturi ipsum quam, animi laboriosam sapiente nostrum necessitatibus quas ea pariatur error explicabo quos consectetur ullam nihil odit? Voluptatem animi repellat rem inventore, repudiandae saepe laborum culpa nihil deleniti corporis. Nostrum reprehenderit recusandae consectetur, quaerat autem natus vitae. Soluta nemo quisquam adipisci cupiditate similique architecto, quam ab corporis harum suscipit quo est, iusto quod earum modi necessitatibus, asperiores ratione sunt animi voluptatum? Eveniet, adipisci illo nemo pariatur ut nisi impedit sint debitis reiciendis nihil, illum dicta cupiditate quo quidem, est laborum minima fugit. Autem fuga eligendi necessitatibus obcaecati temporibus aspernatur, ullam deserunt illum nulla voluptatum mollitia, suscipit odio, placeat molestias. Ullam harum aliquid, voluptate est nam commodi tenetur ut repellat vel quaerat. Sed cupiditate voluptatibus eveniet non aspernatur consequuntur pariatur molestiae magnam, quis, dolorem nemo aperiam impedit.</p><button data-modal-trigger="#my-modal">Click for modal</button>
.modal-backdrop 上的 pointer-events: all 阻碍了滚动，因为不知何故滚轮事件无法通过。
我需要稍微更改 JavaScript
/* ... */
/* CSS */
modal.active .modal-backdrop {
/* pointer-events: all */
}
/* ... */
// JavaScript
// ...
// var el2 = e.target.closest('.modal-backdrop');
// if (el1 || el2) {
var el2 = e.target.closest('.modal-window');
if (el1 || !el2) {
// ...
console.clear();
;(function(d) {
"use strict";
d.addEventListener('click', function(e) {
var el = e.target.closest('[data-modal-trigger]')
if (el) {
var selector = el.dataset.modalTrigger;
Array.from(d.querySelectorAll(selector)).forEach(function(el) {
el.classList.add('active');
})
d.documentElement.classList.add('with-modal')
}
var el1 = e.target.closest('.modal-close');
var el2 = e.target.closest('.modal-window');
if (el1 || !el2) {
e.target.closest('.modal').classList.remove('active')
d.documentElement.classList.remove('with-modal')
}
})
})(document);
html.with-modal body {
height: 100vh;
overflow-y: hidden;
padding-right: 17px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0s 1s;
transition: opacity 0s 1s;
overflow-y: scroll;
}
.modal.active {
opacity: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
pointer-events: all;
}
.modal-backdrop {
z-index: -1;
position: fixed;
top: 0;
right: 17px;
bottom: 0;
left: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 0.2s 0.3s linear;
transition: opacity 0.2s 0.3s linear;
pointer-events: none;
}
.modal.active .modal-backdrop {
opacity: 1;
/* pointer-events: all; */
}
.modal-window {
background-color: #fff;
flex-basis: auto;
width: auto;
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
border: 1px solid;
position: relative;
top: 25px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
margin: auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-align: stretch;
align-items: stretch;
padding: 20px;
opacity: 0;
}
.modal.active .modal-window {
flex-basis: content;
top: 0;
opacity: 1;
}
.modal-content {
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
}
.modal-close {
flex-basis: 40px;
padding: 10px;
box-sizing: border-box;
background-color: pink;
margin-left: auto;
color: red;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
cursor: pointer;
}
button {
border: 2px solid;
border-radius: 10px;
padding: 10px 20px;
background-color: lightgreen;
font-size: 20px;
margin: auto;
text-align: center;
}
<button data-modal-trigger="#my-modal">Click for modal</button>
<div class="region-modal">
<div class="modal" id="my-modal">
<div class="modal-window">
<div class="modal-close">Close</div>
<div class="modal-content">
<h2>My Modal</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos voluptatibus asperiores dolorem dicta veniam? Voluptatum reprehenderit maxime in perferendis sequi?</p>
<p>Id odit doloribus culpa perspiciatis reprehenderit pariatur labore magni fuga eos. Ipsum hic consequuntur delectus? Sapiente tempore dolorem eos aliquid!</p>
<p>Voluptatibus enim velit quasi vitae dolor sapiente ab excepturi iste, quos adipisci id ad quidem atque omnis amet! Eos, eligendi.</p>
<p>Nam culpa quo incidunt quaerat iure itaque, porro hic aperiam ducimus? Vel tempora unde nulla quisquam nisi facere expedita deserunt.</p>
<p>Sunt, minus tempore dignissimos pariatur eos modi at minima culpa nisi debitis ipsam nihil recusandae illum unde magni hic sint!</p>
<p>Veritatis minima excepturi nisi! Ex consectetur, asperiores iste laudantium voluptatem enim, possimus quae porro modi corporis pariatur, non est ratione!</p>
<p>Est consequatur amet dignissimos quibusdam veniam? Commodi qui voluptatum facilis hic? Quasi itaque illo facilis reiciendis, soluta sit maxime delectus?</p>
<p>Explicabo eos neque dolore similique illo illum soluta nulla eveniet! Facilis et ipsa quia asperiores vitae, dignissimos adipisci necessitatibus sed.</p>
<p>Corporis cumque est, nihil omnis possimus consequatur recusandae magnam quod, officia aut odio dolores distinctio nostrum et vitae, consequuntur provident?</p>
<p>Ipsam, quisquam ea magnam autem possimus, rem tempore doloribus, in amet ullam debitis facilis tenetur voluptas labore. Aperiam, quam libero?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, accusantium.</p>
<p>Numquam ea sint debitis voluptatem fuga tempore repudiandae architecto minima.</p>
<p>Quidem explicabo consequatur obcaecati quia nisi quisquam! Eligendi, vero dolor.</p>
<p>Eum cumque perspiciatis praesentium quae provident nobis, excepturi inventore culpa?</p>
<p>Veniam doloremque cupiditate repellat totam, dignissimos unde eaque mollitia a.</p>
<p>Dignissimos consequatur voluptatibus provident velit! Ea voluptas quia iste saepe?</p>
<p>Saepe, fugit cupiditate possimus enim veritatis repudiandae molestias accusamus iure?</p>
<p>Illo unde obcaecati repellendus tenetur, quam doloremque commodi voluptas sit?</p>
<p>Quibusdam velit enim totam amet quasi aperiam repudiandae beatae quia.</p>
<p>Corrupti repellat deleniti aliquid exercitationem! Magni repellendus ipsum quas minus.</p>
<p>Dolor nesciunt ducimus corporis illo dolores deleniti asperiores numquam inventore?</p>
<p>Ratione omnis cum labore consectetur sequi quam, facere qui rem.</p>
<p>Ratione nostrum quia ex quod debitis distinctio iure eligendi eum!</p>
<p>Sunt repudiandae omnis accusantium quidem ipsam corrupti ipsa at vel!</p>
<p>A quasi fugit animi ullam. Dolor dolore incidunt libero velit.</p>
<p>Optio ducimus officia dolor quis, consectetur numquam blanditiis asperiores magnam?</p>
<p>Porro aspernatur suscipit officiis veritatis a quo, earum eos sapiente!</p>
<p>Magnam hic veritatis at. Iste tempora fugit quaerat deserunt qui?</p>
<p>Temporibus excepturi iste harum recusandae aliquid omnis corporis rem iure.</p>
<p>Fugit aut placeat facere suscipit. Magni amet sunt omnis quisquam?</p>
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</div>
<h1>Scroll and modal</h1>
<p>Some scrolling content</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam delectus excepturi, fuga adipisci, deserunt culpa recusandae doloremque debitis non doloribus magnam reprehenderit maxime aut quaerat quam possimus fugit, voluptatem ab beatae reiciendis aperiam error. Explicabo quas necessitatibus cum enim vitae! Dicta maxime ea nam iusto ab reprehenderit placeat blanditiis numquam quam voluptates itaque, commodi aliquid deleniti natus dolorum unde sint. In quasi incidunt iure, repudiandae reiciendis inventore voluptatem modi facilis tempora maxime atque reprehenderit minus dolores neque exercitationem? Quisquam animi alias laudantium esse dicta molestiae ullam ipsum delectus culpa nemo nobis deserunt id, dolore minus. Perferendis ratione libero voluptate tempore fugiat modi, excepturi labore unde soluta ipsa asperiores molestias, corporis sapiente voluptatem distinctio nobis architecto. Ut facere sapiente ipsam inventore tempore architecto tempora officiis, laboriosam natus ea itaque consequatur. Error eum repellendus, perferendis deleniti qui quam voluptatem sint in sapiente eaque illo facilis minus ducimus ex officiis laudantium officia soluta suscipit debitis, recusandae eligendi, unde consectetur facere quasi. Neque corrupti asperiores deserunt eos corporis minima ex. Et a fuga in porro aspernatur quis veniam, repudiandae voluptatum eligendi cumque delectus, iusto voluptatem fugit maiores molestiae vel dolore impedit error. Vitae illo doloremque error totam id et veritatis earum eligendi placeat iste!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Magni illo animi maxime deleniti dolorem a, reprehenderit aut hic iure! Ipsam, eaque voluptates? Voluptates, cum porro. Rerum deserunt iste labore mollitia expedita doloribus reprehenderit eos quae ducimus debitis fugiat quasi molestias in illum accusamus quisquam ipsum dicta eius nemo modi, adipisci unde incidunt! Repellendus ad nihil fuga tempora nobis? Magni omnis, ea alias pariatur eligendi doloribus, adipisci laborum possimus maxime provident esse! Ullam similique ducimus quod unde culpa ipsa illum nisi aut aspernatur consequuntur assumenda neque nihil quam ipsum, eius suscipit eligendi. Optio est, illo aut reiciendis alias corporis! Dolorum omnis facilis similique labore ab laboriosam repudiandae magnam voluptatibus, iusto praesentium! Illum laudantium consectetur molestiae nulla voluptatibus consequuntur? Quas natus iure harum praesentium deleniti rem fuga quidem, sit sequi. Quod consequatur voluptatibus quas unde officia laborum expedita quaerat vero, facilis, nemo excepturi nobis iure repellat explicabo eius atque accusamus ex tempore. Cumque aliquam mollitia, provident iste quasi maxime, quod voluptatum fugit at accusantium vitae. Aperiam soluta nobis iusto incidunt non aspernatur nihil cumque eum vero commodi animi in, quasi deleniti doloremque earum reprehenderit officiis praesentium. Totam illum quod dolorum sequi placeat temporibus odit quis, doloribus ratione repellendus? Itaque et fuga illo cumque aliquam voluptatem magni laudantium fugiat nemo obcaecati.</p>
<p>Est iure, laboriosam sint quibusdam corrupti magni a minus repudiandae, incidunt autem consequuntur dolorem cumque eaque, nulla facere illum veritatis. Voluptatibus rerum fugiat iusto hic animi distinctio. Officiis, atque. Laboriosam excepturi iure quaerat exercitationem architecto optio laudantium, id amet dolores fugit ullam harum itaque nesciunt, at enim neque quam consectetur eveniet! Libero ex quos pariatur quaerat esse quas dolore praesentium in ipsam ab aut at expedita nam a soluta consequatur ducimus iusto rem voluptate laborum, dolorum quod veniam? Nihil accusamus quis ratione nemo beatae provident sequi ea ipsam quia explicabo quasi molestias voluptatum eius nostrum, modi sunt voluptate! Perspiciatis vitae voluptatibus quos ea optio perferendis minus repellendus a, ut tempora maiores beatae! Tempora impedit nesciunt ab dolore odit ipsa quia soluta illum! Explicabo dolorem molestiae fuga blanditiis, fugit commodi vitae ab non! Itaque veniam facere pariatur eius saepe ipsam incidunt numquam deleniti similique tempora? Doloribus natus architecto nulla vitae ullam ipsam fugiat maiores officia deleniti a, iure asperiores esse velit alias culpa? Nisi obcaecati, iste sequi officiis aliquam aut commodi vitae consequatur ea molestias sint eligendi ut dolore eveniet consectetur laborum quos natus cum quia molestiae explicabo id. A excepturi cumque porro vero nulla voluptate harum atque animi deleniti voluptas?</p>
<p>Ipsa esse dolor, dicta quis quod hic fugit quaerat repudiandae nobis cum voluptatem expedita amet tempora sed atque repellendus, cumque consequuntur iste adipisci quae aliquam ex sapiente corrupti? Quia numquam obcaecati nesciunt. Nisi quis cupiditate obcaecati at, nesciunt quae ipsum repellendus distinctio facilis ut architecto repellat explicabo impedit hic ex recusandae cum excepturi quisquam beatae sint fugiat, laboriosam blanditiis ratione. Veritatis accusamus quis totam et dignissimos, deserunt cumque quisquam amet eveniet ratione error autem ipsa maxime ducimus, voluptate, architecto nemo incidunt molestiae id. Saepe necessitatibus ipsam ad atque ullam quisquam maxime, soluta nemo voluptates corrupti mollitia praesentium, aliquam rem facilis ipsum deserunt perspiciatis autem animi quia commodi possimus! Consequuntur in nam sit hic temporibus aliquam. Amet alias, nobis exercitationem, veritatis nesciunt sit necessitatibus doloremque fugiat ullam rerum quia libero. Iste quaerat, totam labore qui provident eum sunt dolorem fugit facere dolorum quasi rem! Iste velit obcaecati aliquam maxime totam animi, harum labore vitae quos voluptates culpa earum quo, quibusdam explicabo eius nesciunt assumenda nulla natus, quae non ut dolorum nemo hic! Neque blanditiis molestiae esse ad laudantium, cum nostrum non alias nihil! Neque nostrum quam iste commodi consequatur obcaecati quibusdam ipsa corporis ut exercitationem rerum minima, facere aspernatur praesentium vitae.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Necessitatibus, deserunt vero aut reiciendis omnis adipisci in aspernatur officia exercitationem, fuga perferendis alias maxime eum odio! Officia, exercitationem? Magnam cum sequi at totam distinctio libero animi non doloribus odio quisquam commodi quaerat, culpa cupiditate voluptatum impedit sapiente reprehenderit odit aspernatur. Quasi mollitia saepe commodi tempora inventore adipisci voluptatem eius et aperiam nemo maiores ipsam corrupti, impedit numquam repudiandae illo voluptate! Error nihil repellendus numquam similique cum in assumenda eligendi accusantium, saepe, consequuntur repudiandae neque fugiat aperiam delectus vero eum atque! Hic nostrum deleniti quos rem velit ad pariatur sit recusandae distinctio corrupti, et fugiat. Beatae nobis obcaecati esse fugit at culpa consectetur, accusamus suscipit necessitatibus, maxime pariatur ipsa? Suscipit quaerat pariatur accusamus debitis vitae neque eos odio, quod qui ad, explicabo quae rem necessitatibus sunt corrupti deserunt minima voluptatem laudantium obcaecati illum aliquid velit doloremque molestias? Hic fuga debitis explicabo neque quaerat ratione est totam cumque eius tempore necessitatibus at eos, sequi veritatis perferendis numquam ducimus sit nisi iusto doloribus. Dolor a doloremque maiores ipsum expedita? Deleniti deserunt delectus iste iusto aspernatur quo, dolorem ipsum, modi nulla, accusamus quam a eius natus nisi id in neque explicabo nesciunt at harum labore eaque ratione molestias! Officiis delectus facere error tenetur?</p>
<p>Magni possimus necessitatibus voluptate nobis voluptatibus minima odio atque at neque similique natus, totam obcaecati harum qui? Vero molestiae laborum accusantium reprehenderit consectetur, nobis veniam ea praesentium vel soluta hic, dolore assumenda, accusamus fugit voluptatum totam delectus ut minima at autem nam dignissimos illum veritatis explicabo? Explicabo harum animi commodi adipisci ab totam expedita. Cum atque maiores perspiciatis. Similique eos commodi, rem, tenetur placeat reprehenderit unde fugit, qui at sed corrupti! Sapiente, minus sint possimus itaque facere, voluptate illo officiis nesciunt accusantium recusandae maxime blanditiis doloribus. Odit asperiores quis illo quasi obcaecati ipsa, commodi beatae labore voluptates, vel quo neque, enim reprehenderit iste rerum debitis quisquam! Esse, maiores atque! Maxime eligendi eaque delectus eum, aut necessitatibus ad? A, accusamus! Quos, harum pariatur nostrum delectus dolores corrupti, repellendus vel blanditiis rem laboriosam laudantium quam perspiciatis incidunt dignissimos voluptatibus, minus voluptas ducimus fugit veritatis similique. Repudiandae possimus autem quod! Repudiandae eos perferendis libero nihil, dolores harum. Dolorum eos eligendi sequi odit at molestias mollitia libero nemo illum, excepturi, in temporibus, necessitatibus velit officia nam quidem laudantium dolore delectus non aliquam. Hic libero earum consequatur maiores nesciunt sequi, atque reprehenderit ipsa quos odit unde aperiam omnis, vitae quod, laborum accusantium perspiciatis dolorum ratione?</p>
<p>Sunt dolore ratione excepturi tempore voluptatum voluptas consequatur reiciendis, harum eaque mollitia beatae natus dolorem dolorum atque at consequuntur quaerat. Mollitia, iusto dicta. Nulla ea dolores similique aliquid possimus, pariatur a saepe iusto aut veritatis voluptatibus assumenda animi nam nobis esse tempore, asperiores numquam maiores. Consequuntur saepe fugiat ipsum excepturi, non corporis eum aut dignissimos. Consequatur nesciunt laborum earum consectetur reprehenderit voluptate molestias quidem, deleniti quae tempore sequi. Tempora architecto a accusantium odio voluptates aliquam autem suscipit provident sit asperiores incidunt illum ducimus facilis, molestias, inventore mollitia! Atque provident odio soluta deserunt quisquam tenetur quae molestias magnam ex, sed culpa nulla fuga corporis vero maxime quidem mollitia facere. Illo et non perspiciatis consequatur nobis temporibus eveniet nulla aut quae animi facilis veritatis minus, recusandae fugiat odit atque! Natus beatae velit possimus repellendus, perspiciatis vero culpa voluptatem quia atque quos doloribus nostrum fuga cum ea. Accusamus officia numquam praesentium sapiente! Tenetur sed harum itaque maxime ea velit, dolor doloremque soluta natus libero tempore similique adipisci optio dolorem aut accusamus in ut vel quaerat, inventore veniam quis. Explicabo, ipsum temporibus saepe ad, libero consectetur adipisci amet quaerat placeat rem sit dolore fugiat cupiditate porro quod commodi expedita totam veniam. Reiciendis, consequuntur nostrum!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Voluptas odit dicta laudantium temporibus unde nesciunt repellendus asperiores incidunt consectetur! Accusantium quis dolorum eveniet quos atque voluptas amet! Iure quo nam alias, veniam hic totam quia voluptates dolorem quibusdam eum fuga enim sunt laudantium velit, ducimus doloremque omnis quae delectus explicabo quis sed. Voluptate, eius fugiat odio minima sapiente ut illo error molestiae, repellat exercitationem nesciunt sit iste earum provident reprehenderit? A, distinctio. Cupiditate magni eius eligendi atque et rerum dicta illo sequi voluptates esse dolores, ducimus corporis laudantium in eos accusantium temporibus delectus vel quidem dolor repudiandae numquam libero officiis non? Commodi nostrum doloribus officiis hic doloremque, corporis rerum harum dolore eum quia voluptatibus inventore at sapiente consequatur laudantium quos quaerat vero? Voluptates modi ut totam aliquid laudantium consequuntur beatae odio tempore iusto officiis exercitationem, animi quos, dignissimos voluptatibus quas ad eaque. Nam, repellendus numquam veniam excepturi inventore iusto non accusantium eaque corporis laboriosam ipsa at modi recusandae atque perspiciatis. Ab doloribus animi unde eaque cumque esse, sint qui suscipit earum magni provident labore, velit, ipsam inventore veniam reiciendis officia voluptas sequi quisquam impedit? Ut laborum magnam a iusto? Assumenda quidem expedita laudantium vero! Quos soluta, magni nemo ipsa ratione incidunt eius nihil facilis? Rerum corporis iure eligendi.</p>
<p>Inventore obcaecati reprehenderit, corporis repellendus, possimus velit vel alias, id voluptate eaque voluptatem numquam eveniet nostrum? Ab vel, illo consectetur quas beatae repudiandae error vero quam dolorum quasi velit aut iure! Totam nemo perferendis velit quidem adipisci reprehenderit molestias optio pariatur doloremque reiciendis repellat repellendus blanditiis error a ratione laudantium nobis aliquam, dolorem numquam porro sapiente. Amet inventore corporis suscipit natus est sunt, laborum excepturi rerum, quasi sequi commodi placeat officiis nobis. Voluptate, error odit! Blanditiis laborum, nihil quo quas reprehenderit aspernatur cupiditate explicabo! Sint magnam nesciunt eligendi nostrum cumque, dolor saepe est quidem nihil consectetur, laborum soluta, accusamus doloremque. Rerum modi sapiente aliquam dolore itaque, voluptatibus tempore atque consequuntur maxime omnis recusandae quo quaerat laborum aspernatur possimus dolorem earum adipisci, non, excepturi quia! Iusto et repellendus inventore eligendi magnam, quae beatae numquam aliquam animi incidunt officia similique qui cumque. Fugit est deserunt rerum, assumenda eligendi, voluptatibus corporis sed qui minus doloribus officia esse sit sint earum veniam. Magnam ipsum ipsam aliquam doloribus magni a perspiciatis qui beatae blanditiis dolorum, aliquid nemo impedit omnis numquam expedita mollitia, quos assumenda necessitatibus quas. Ipsam rem voluptas delectus ipsa ratione! Optio, distinctio dicta. Unde id harum dolorem sed velit, impedit distinctio dignissimos error.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Laborum exercitationem quas ex! Nostrum quaerat eaque itaque repudiandae expedita dolores sapiente quia non hic obcaecati, tempora error quo facilis ut quas adipisci voluptatum voluptate, qui temporibus! Eveniet corporis molestiae sapiente, omnis nostrum quod consectetur at error velit aspernatur vero non illum quidem voluptates laboriosam molestias! Porro nobis, soluta cum laboriosam dolore delectus amet reprehenderit adipisci! Quis enim praesentium officiis voluptatum quasi, totam corporis vero sit, laboriosam beatae, nam ab! Molestias id amet impedit maxime cupiditate iure officiis, ad ipsum ipsam excepturi corrupti praesentium velit repellendus quo facilis? Officia recusandae nobis nemo fugiat iste id explicabo asperiores non quis rerum tempora repellendus necessitatibus error unde quam ea ratione autem quaerat est hic quia deserunt, doloremque aspernatur. Quos inventore enim perspiciatis illum voluptatibus officia voluptas molestiae eveniet consectetur eos voluptatem, tempore necessitatibus eius mollitia reiciendis aut ullam aspernatur aliquid nihil expedita nisi accusantium sunt quam dolorum. Natus sit sequi itaque ut, ex, maiores aspernatur magni nostrum ad ratione assumenda qui hic? Similique molestiae aperiam quae laudantium pariatur quibusdam, quidem provident ducimus, modi blanditiis sed? Recusandae, iure? Nihil laborum rerum adipisci tenetur aspernatur quas asperiores. Deserunt amet, veniam doloremque pariatur nisi et quis commodi voluptates error cumque modi inventore optio, tempore fugiat.</p>
<p>Totam, quod et tenetur officiis consequuntur laboriosam provident dicta unde placeat, expedita ad sit voluptas molestiae ipsam voluptatibus omnis, magni id sunt esse modi distinctio exercitationem? Saepe unde repudiandae enim dolor explicabo possimus vel quisquam cumque. Minus dolorem vitae, qui at facilis dicta tenetur quos aut corrupti nisi doloremque asperiores ab sint hic, laudantium eveniet. Alias iste tempora obcaecati dignissimos delectus nesciunt tenetur mollitia eum architecto officiis quas odit, quo magni, beatae accusamus asperiores eius facere, corrupti provident earum dicta laboriosam blanditiis esse libero! Aspernatur omnis iste sit, magni facere possimus ea provident officiis rerum ducimus similique natus neque suscipit incidunt repellat perspiciatis, itaque iure. Pariatur nesciunt libero rerum inventore? Nobis aperiam, nostrum odio facilis id animi atque provident hic dolorem quas fugit earum velit ratione qui ipsam repellendus ut sit omnis facere libero ex neque? Provident error ducimus modi magnam fuga, ex eveniet omnis earum sed magni at asperiores harum, veniam quidem perferendis. Dicta ab voluptates ipsum quas expedita eligendi voluptate praesentium, consequuntur harum qui eum veniam maiores in molestiae aliquid, totam quod officiis asperiores ex necessitatibus. Saepe porro unde dicta beatae consectetur provident quidem suscipit, sed laborum sit, doloribus expedita mollitia aliquam adipisci necessitatibus pariatur veniam laudantium sequi?</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Aperiam, fugit ipsam. Minus quaerat nesciunt eum iure architecto, exercitationem laudantium corporis quos quam odio repellendus, accusamus qui dolor vitae numquam suscipit debitis, amet eaque perferendis quasi doloremque. Sit sapiente nihil corporis mollitia placeat tenetur eius fuga quisquam quam, dignissimos, possimus aspernatur. Praesentium magnam obcaecati, vitae deserunt inventore dolorem aspernatur impedit laboriosam quae deleniti nesciunt, animi amet totam est eum delectus incidunt id quisquam sapiente labore sint ad ipsa dignissimos. Officia ipsum quis minus sapiente corrupti quasi eius iste unde distinctio ducimus voluptatum vitae perferendis, iusto cupiditate optio laborum veniam ex dolorum, dolores omnis! Repellat perspiciatis quidem, molestiae reprehenderit a aliquam, modi obcaecati voluptatum, iste expedita itaque non. Error atque fugiat sunt ab. Ullam, ipsam id! Sunt fugit maxime incidunt illum reprehenderit deserunt qui iste quisquam natus labore eveniet ut porro ab eos commodi consequuntur eum delectus quaerat, molestias, architecto obcaecati. Unde aliquam exercitationem numquam corrupti recusandae autem ratione animi voluptas. Laborum adipisci aperiam consequuntur dolorum dolor aspernatur rerum cum impedit harum vel, animi quaerat, magnam consectetur optio sunt assumenda! Eius tenetur nam fugiat voluptatibus dignissimos ipsum, aperiam sint delectus ab, reiciendis in voluptatem tempore optio. Numquam mollitia quis vero sequi, nisi tempore fuga ducimus doloremque a nostrum, praesentium id.</p>
<p>Consequatur, velit, fuga harum nam quod commodi esse tempora laboriosam exercitationem reiciendis veniam, fugit expedita. Vitae, doloremque? Ex similique saepe perferendis iste autem veniam aliquid, harum minus? Molestias nobis eaque inventore saepe similique et vero autem eveniet repellendus. Excepturi magnam dignissimos, consectetur unde in expedita praesentium possimus consequuntur quaerat corporis beatae nobis minus. Molestias, harum ut! Dolores distinctio, quo placeat nam obcaecati cupiditate voluptatem nemo? A suscipit placeat quas iusto impedit. Libero ipsam excepturi ipsum quam, animi laboriosam sapiente nostrum necessitatibus quas ea pariatur error explicabo quos consectetur ullam nihil odit? Voluptatem animi repellat rem inventore, repudiandae saepe laborum culpa nihil deleniti corporis. Nostrum reprehenderit recusandae consectetur, quaerat autem natus vitae. Soluta nemo quisquam adipisci cupiditate similique architecto, quam ab corporis harum suscipit quo est, iusto quod earum modi necessitatibus, asperiores ratione sunt animi voluptatum? Eveniet, adipisci illo nemo pariatur ut nisi impedit sint debitis reiciendis nihil, illum dicta cupiditate quo quidem, est laborum minima fugit. Autem fuga eligendi necessitatibus obcaecati temporibus aspernatur, ullam deserunt illum nulla voluptatum mollitia, suscipit odio, placeat molestias. Ullam harum aliquid, voluptate est nam commodi tenetur ut repellat vel quaerat. Sed cupiditate voluptatibus eveniet non aspernatur consequuntur pariatur molestiae magnam, quis, dolorem nemo aperiam impedit.</p><button data-modal-trigger="#my-modal">Click for modal</button>
我有这个模态解决方案。在 Chrome 和 Edge 中运行良好，但在 Firefox 浏览器中存在缺陷。
如果模态高于屏幕，则完整模态应该是可滚动的，而 body 应该不是。唉，我只能用滚动条向右滚动模态，不能用鼠标滚轮。
编辑
这在 Whosebug 上的 Firefox 浏览器中运行良好，但 codepen debug 上的相同代码不起作用！
console.clear();
;(function(d) {
"use strict";
d.addEventListener('click', function(e) {
var el = e.target.closest('[data-modal-trigger]')
if (el) {
var selector = el.dataset.modalTrigger;
Array.from(d.querySelectorAll(selector)).forEach(function(el) {
el.classList.add('active');
})
d.documentElement.classList.add('with-modal')
}
var el1 = e.target.closest('.modal-close');
var el2 = e.target.closest('.modal-backdrop');
if (el1 || el2) {
e.target.closest('.modal').classList.remove('active')
d.documentElement.classList.remove('with-modal')
}
})
})(document);
html.with-modal body {
height: 100vh;
overflow-y: hidden;
padding-right: 17px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0s 1s;
transition: opacity 0s 1s;
overflow-y: scroll;
}
.modal.active {
opacity: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
pointer-events: all;
}
.modal-backdrop {
z-index: -1;
position: fixed;
top: 0;
right: 17px;
bottom: 0;
left: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 0.2s 0.3s linear;
transition: opacity 0.2s 0.3s linear;
pointer-events: none;
}
.modal.active .modal-backdrop {
opacity: 1;
pointer-events: all;
}
.modal-window {
background-color: #fff;
flex-basis: auto;
width: auto;
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
border: 1px solid;
position: relative;
top: 25px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
margin: auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-align: stretch;
align-items: stretch;
padding: 20px;
opacity: 0;
}
.modal.active .modal-window {
flex-basis: content;
top: 0;
opacity: 1;
}
.modal-content {
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
}
.modal-close {
flex-basis: 40px;
padding: 10px;
box-sizing: border-box;
background-color: pink;
margin-left: auto;
color: red;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
cursor: pointer;
}
button {
border: 2px solid;
border-radius: 10px;
padding: 10px 20px;
background-color: lightgreen;
font-size: 20px;
margin: auto;
text-align: center;
}
<button data-modal-trigger="#my-modal">Click for modal</button>
<div class="region-modal">
<div class="modal" id="my-modal">
<div class="modal-window">
<div class="modal-close">Close</div>
<div class="modal-content">
<h2>My Modal</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos voluptatibus asperiores dolorem dicta veniam? Voluptatum reprehenderit maxime in perferendis sequi?</p>
<p>Id odit doloribus culpa perspiciatis reprehenderit pariatur labore magni fuga eos. Ipsum hic consequuntur delectus? Sapiente tempore dolorem eos aliquid!</p>
<p>Voluptatibus enim velit quasi vitae dolor sapiente ab excepturi iste, quos adipisci id ad quidem atque omnis amet! Eos, eligendi.</p>
<p>Nam culpa quo incidunt quaerat iure itaque, porro hic aperiam ducimus? Vel tempora unde nulla quisquam nisi facere expedita deserunt.</p>
<p>Sunt, minus tempore dignissimos pariatur eos modi at minima culpa nisi debitis ipsam nihil recusandae illum unde magni hic sint!</p>
<p>Veritatis minima excepturi nisi! Ex consectetur, asperiores iste laudantium voluptatem enim, possimus quae porro modi corporis pariatur, non est ratione!</p>
<p>Est consequatur amet dignissimos quibusdam veniam? Commodi qui voluptatum facilis hic? Quasi itaque illo facilis reiciendis, soluta sit maxime delectus?</p>
<p>Explicabo eos neque dolore similique illo illum soluta nulla eveniet! Facilis et ipsa quia asperiores vitae, dignissimos adipisci necessitatibus sed.</p>
<p>Corporis cumque est, nihil omnis possimus consequatur recusandae magnam quod, officia aut odio dolores distinctio nostrum et vitae, consequuntur provident?</p>
<p>Ipsam, quisquam ea magnam autem possimus, rem tempore doloribus, in amet ullam debitis facilis tenetur voluptas labore. Aperiam, quam libero?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, accusantium.</p>
<p>Numquam ea sint debitis voluptatem fuga tempore repudiandae architecto minima.</p>
<p>Quidem explicabo consequatur obcaecati quia nisi quisquam! Eligendi, vero dolor.</p>
<p>Eum cumque perspiciatis praesentium quae provident nobis, excepturi inventore culpa?</p>
<p>Veniam doloremque cupiditate repellat totam, dignissimos unde eaque mollitia a.</p>
<p>Dignissimos consequatur voluptatibus provident velit! Ea voluptas quia iste saepe?</p>
<p>Saepe, fugit cupiditate possimus enim veritatis repudiandae molestias accusamus iure?</p>
<p>Illo unde obcaecati repellendus tenetur, quam doloremque commodi voluptas sit?</p>
<p>Quibusdam velit enim totam amet quasi aperiam repudiandae beatae quia.</p>
<p>Corrupti repellat deleniti aliquid exercitationem! Magni repellendus ipsum quas minus.</p>
<p>Dolor nesciunt ducimus corporis illo dolores deleniti asperiores numquam inventore?</p>
<p>Ratione omnis cum labore consectetur sequi quam, facere qui rem.</p>
<p>Ratione nostrum quia ex quod debitis distinctio iure eligendi eum!</p>
<p>Sunt repudiandae omnis accusantium quidem ipsam corrupti ipsa at vel!</p>
<p>A quasi fugit animi ullam. Dolor dolore incidunt libero velit.</p>
<p>Optio ducimus officia dolor quis, consectetur numquam blanditiis asperiores magnam?</p>
<p>Porro aspernatur suscipit officiis veritatis a quo, earum eos sapiente!</p>
<p>Magnam hic veritatis at. Iste tempora fugit quaerat deserunt qui?</p>
<p>Temporibus excepturi iste harum recusandae aliquid omnis corporis rem iure.</p>
<p>Fugit aut placeat facere suscipit. Magni amet sunt omnis quisquam?</p>
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</div>
<h1>Scroll and modal</h1>
<p>Some scrolling content</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam delectus excepturi, fuga adipisci, deserunt culpa recusandae doloremque debitis non doloribus magnam reprehenderit maxime aut quaerat quam possimus fugit, voluptatem ab beatae reiciendis aperiam error. Explicabo quas necessitatibus cum enim vitae! Dicta maxime ea nam iusto ab reprehenderit placeat blanditiis numquam quam voluptates itaque, commodi aliquid deleniti natus dolorum unde sint. In quasi incidunt iure, repudiandae reiciendis inventore voluptatem modi facilis tempora maxime atque reprehenderit minus dolores neque exercitationem? Quisquam animi alias laudantium esse dicta molestiae ullam ipsum delectus culpa nemo nobis deserunt id, dolore minus. Perferendis ratione libero voluptate tempore fugiat modi, excepturi labore unde soluta ipsa asperiores molestias, corporis sapiente voluptatem distinctio nobis architecto. Ut facere sapiente ipsam inventore tempore architecto tempora officiis, laboriosam natus ea itaque consequatur. Error eum repellendus, perferendis deleniti qui quam voluptatem sint in sapiente eaque illo facilis minus ducimus ex officiis laudantium officia soluta suscipit debitis, recusandae eligendi, unde consectetur facere quasi. Neque corrupti asperiores deserunt eos corporis minima ex. Et a fuga in porro aspernatur quis veniam, repudiandae voluptatum eligendi cumque delectus, iusto voluptatem fugit maiores molestiae vel dolore impedit error. Vitae illo doloremque error totam id et veritatis earum eligendi placeat iste!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Magni illo animi maxime deleniti dolorem a, reprehenderit aut hic iure! Ipsam, eaque voluptates? Voluptates, cum porro. Rerum deserunt iste labore mollitia expedita doloribus reprehenderit eos quae ducimus debitis fugiat quasi molestias in illum accusamus quisquam ipsum dicta eius nemo modi, adipisci unde incidunt! Repellendus ad nihil fuga tempora nobis? Magni omnis, ea alias pariatur eligendi doloribus, adipisci laborum possimus maxime provident esse! Ullam similique ducimus quod unde culpa ipsa illum nisi aut aspernatur consequuntur assumenda neque nihil quam ipsum, eius suscipit eligendi. Optio est, illo aut reiciendis alias corporis! Dolorum omnis facilis similique labore ab laboriosam repudiandae magnam voluptatibus, iusto praesentium! Illum laudantium consectetur molestiae nulla voluptatibus consequuntur? Quas natus iure harum praesentium deleniti rem fuga quidem, sit sequi. Quod consequatur voluptatibus quas unde officia laborum expedita quaerat vero, facilis, nemo excepturi nobis iure repellat explicabo eius atque accusamus ex tempore. Cumque aliquam mollitia, provident iste quasi maxime, quod voluptatum fugit at accusantium vitae. Aperiam soluta nobis iusto incidunt non aspernatur nihil cumque eum vero commodi animi in, quasi deleniti doloremque earum reprehenderit officiis praesentium. Totam illum quod dolorum sequi placeat temporibus odit quis, doloribus ratione repellendus? Itaque et fuga illo cumque aliquam voluptatem magni laudantium fugiat nemo obcaecati.</p>
<p>Est iure, laboriosam sint quibusdam corrupti magni a minus repudiandae, incidunt autem consequuntur dolorem cumque eaque, nulla facere illum veritatis. Voluptatibus rerum fugiat iusto hic animi distinctio. Officiis, atque. Laboriosam excepturi iure quaerat exercitationem architecto optio laudantium, id amet dolores fugit ullam harum itaque nesciunt, at enim neque quam consectetur eveniet! Libero ex quos pariatur quaerat esse quas dolore praesentium in ipsam ab aut at expedita nam a soluta consequatur ducimus iusto rem voluptate laborum, dolorum quod veniam? Nihil accusamus quis ratione nemo beatae provident sequi ea ipsam quia explicabo quasi molestias voluptatum eius nostrum, modi sunt voluptate! Perspiciatis vitae voluptatibus quos ea optio perferendis minus repellendus a, ut tempora maiores beatae! Tempora impedit nesciunt ab dolore odit ipsa quia soluta illum! Explicabo dolorem molestiae fuga blanditiis, fugit commodi vitae ab non! Itaque veniam facere pariatur eius saepe ipsam incidunt numquam deleniti similique tempora? Doloribus natus architecto nulla vitae ullam ipsam fugiat maiores officia deleniti a, iure asperiores esse velit alias culpa? Nisi obcaecati, iste sequi officiis aliquam aut commodi vitae consequatur ea molestias sint eligendi ut dolore eveniet consectetur laborum quos natus cum quia molestiae explicabo id. A excepturi cumque porro vero nulla voluptate harum atque animi deleniti voluptas?</p>
<p>Ipsa esse dolor, dicta quis quod hic fugit quaerat repudiandae nobis cum voluptatem expedita amet tempora sed atque repellendus, cumque consequuntur iste adipisci quae aliquam ex sapiente corrupti? Quia numquam obcaecati nesciunt. Nisi quis cupiditate obcaecati at, nesciunt quae ipsum repellendus distinctio facilis ut architecto repellat explicabo impedit hic ex recusandae cum excepturi quisquam beatae sint fugiat, laboriosam blanditiis ratione. Veritatis accusamus quis totam et dignissimos, deserunt cumque quisquam amet eveniet ratione error autem ipsa maxime ducimus, voluptate, architecto nemo incidunt molestiae id. Saepe necessitatibus ipsam ad atque ullam quisquam maxime, soluta nemo voluptates corrupti mollitia praesentium, aliquam rem facilis ipsum deserunt perspiciatis autem animi quia commodi possimus! Consequuntur in nam sit hic temporibus aliquam. Amet alias, nobis exercitationem, veritatis nesciunt sit necessitatibus doloremque fugiat ullam rerum quia libero. Iste quaerat, totam labore qui provident eum sunt dolorem fugit facere dolorum quasi rem! Iste velit obcaecati aliquam maxime totam animi, harum labore vitae quos voluptates culpa earum quo, quibusdam explicabo eius nesciunt assumenda nulla natus, quae non ut dolorum nemo hic! Neque blanditiis molestiae esse ad laudantium, cum nostrum non alias nihil! Neque nostrum quam iste commodi consequatur obcaecati quibusdam ipsa corporis ut exercitationem rerum minima, facere aspernatur praesentium vitae.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Necessitatibus, deserunt vero aut reiciendis omnis adipisci in aspernatur officia exercitationem, fuga perferendis alias maxime eum odio! Officia, exercitationem? Magnam cum sequi at totam distinctio libero animi non doloribus odio quisquam commodi quaerat, culpa cupiditate voluptatum impedit sapiente reprehenderit odit aspernatur. Quasi mollitia saepe commodi tempora inventore adipisci voluptatem eius et aperiam nemo maiores ipsam corrupti, impedit numquam repudiandae illo voluptate! Error nihil repellendus numquam similique cum in assumenda eligendi accusantium, saepe, consequuntur repudiandae neque fugiat aperiam delectus vero eum atque! Hic nostrum deleniti quos rem velit ad pariatur sit recusandae distinctio corrupti, et fugiat. Beatae nobis obcaecati esse fugit at culpa consectetur, accusamus suscipit necessitatibus, maxime pariatur ipsa? Suscipit quaerat pariatur accusamus debitis vitae neque eos odio, quod qui ad, explicabo quae rem necessitatibus sunt corrupti deserunt minima voluptatem laudantium obcaecati illum aliquid velit doloremque molestias? Hic fuga debitis explicabo neque quaerat ratione est totam cumque eius tempore necessitatibus at eos, sequi veritatis perferendis numquam ducimus sit nisi iusto doloribus. Dolor a doloremque maiores ipsum expedita? Deleniti deserunt delectus iste iusto aspernatur quo, dolorem ipsum, modi nulla, accusamus quam a eius natus nisi id in neque explicabo nesciunt at harum labore eaque ratione molestias! Officiis delectus facere error tenetur?</p>
<p>Magni possimus necessitatibus voluptate nobis voluptatibus minima odio atque at neque similique natus, totam obcaecati harum qui? Vero molestiae laborum accusantium reprehenderit consectetur, nobis veniam ea praesentium vel soluta hic, dolore assumenda, accusamus fugit voluptatum totam delectus ut minima at autem nam dignissimos illum veritatis explicabo? Explicabo harum animi commodi adipisci ab totam expedita. Cum atque maiores perspiciatis. Similique eos commodi, rem, tenetur placeat reprehenderit unde fugit, qui at sed corrupti! Sapiente, minus sint possimus itaque facere, voluptate illo officiis nesciunt accusantium recusandae maxime blanditiis doloribus. Odit asperiores quis illo quasi obcaecati ipsa, commodi beatae labore voluptates, vel quo neque, enim reprehenderit iste rerum debitis quisquam! Esse, maiores atque! Maxime eligendi eaque delectus eum, aut necessitatibus ad? A, accusamus! Quos, harum pariatur nostrum delectus dolores corrupti, repellendus vel blanditiis rem laboriosam laudantium quam perspiciatis incidunt dignissimos voluptatibus, minus voluptas ducimus fugit veritatis similique. Repudiandae possimus autem quod! Repudiandae eos perferendis libero nihil, dolores harum. Dolorum eos eligendi sequi odit at molestias mollitia libero nemo illum, excepturi, in temporibus, necessitatibus velit officia nam quidem laudantium dolore delectus non aliquam. Hic libero earum consequatur maiores nesciunt sequi, atque reprehenderit ipsa quos odit unde aperiam omnis, vitae quod, laborum accusantium perspiciatis dolorum ratione?</p>
<p>Sunt dolore ratione excepturi tempore voluptatum voluptas consequatur reiciendis, harum eaque mollitia beatae natus dolorem dolorum atque at consequuntur quaerat. Mollitia, iusto dicta. Nulla ea dolores similique aliquid possimus, pariatur a saepe iusto aut veritatis voluptatibus assumenda animi nam nobis esse tempore, asperiores numquam maiores. Consequuntur saepe fugiat ipsum excepturi, non corporis eum aut dignissimos. Consequatur nesciunt laborum earum consectetur reprehenderit voluptate molestias quidem, deleniti quae tempore sequi. Tempora architecto a accusantium odio voluptates aliquam autem suscipit provident sit asperiores incidunt illum ducimus facilis, molestias, inventore mollitia! Atque provident odio soluta deserunt quisquam tenetur quae molestias magnam ex, sed culpa nulla fuga corporis vero maxime quidem mollitia facere. Illo et non perspiciatis consequatur nobis temporibus eveniet nulla aut quae animi facilis veritatis minus, recusandae fugiat odit atque! Natus beatae velit possimus repellendus, perspiciatis vero culpa voluptatem quia atque quos doloribus nostrum fuga cum ea. Accusamus officia numquam praesentium sapiente! Tenetur sed harum itaque maxime ea velit, dolor doloremque soluta natus libero tempore similique adipisci optio dolorem aut accusamus in ut vel quaerat, inventore veniam quis. Explicabo, ipsum temporibus saepe ad, libero consectetur adipisci amet quaerat placeat rem sit dolore fugiat cupiditate porro quod commodi expedita totam veniam. Reiciendis, consequuntur nostrum!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Voluptas odit dicta laudantium temporibus unde nesciunt repellendus asperiores incidunt consectetur! Accusantium quis dolorum eveniet quos atque voluptas amet! Iure quo nam alias, veniam hic totam quia voluptates dolorem quibusdam eum fuga enim sunt laudantium velit, ducimus doloremque omnis quae delectus explicabo quis sed. Voluptate, eius fugiat odio minima sapiente ut illo error molestiae, repellat exercitationem nesciunt sit iste earum provident reprehenderit? A, distinctio. Cupiditate magni eius eligendi atque et rerum dicta illo sequi voluptates esse dolores, ducimus corporis laudantium in eos accusantium temporibus delectus vel quidem dolor repudiandae numquam libero officiis non? Commodi nostrum doloribus officiis hic doloremque, corporis rerum harum dolore eum quia voluptatibus inventore at sapiente consequatur laudantium quos quaerat vero? Voluptates modi ut totam aliquid laudantium consequuntur beatae odio tempore iusto officiis exercitationem, animi quos, dignissimos voluptatibus quas ad eaque. Nam, repellendus numquam veniam excepturi inventore iusto non accusantium eaque corporis laboriosam ipsa at modi recusandae atque perspiciatis. Ab doloribus animi unde eaque cumque esse, sint qui suscipit earum magni provident labore, velit, ipsam inventore veniam reiciendis officia voluptas sequi quisquam impedit? Ut laborum magnam a iusto? Assumenda quidem expedita laudantium vero! Quos soluta, magni nemo ipsa ratione incidunt eius nihil facilis? Rerum corporis iure eligendi.</p>
<p>Inventore obcaecati reprehenderit, corporis repellendus, possimus velit vel alias, id voluptate eaque voluptatem numquam eveniet nostrum? Ab vel, illo consectetur quas beatae repudiandae error vero quam dolorum quasi velit aut iure! Totam nemo perferendis velit quidem adipisci reprehenderit molestias optio pariatur doloremque reiciendis repellat repellendus blanditiis error a ratione laudantium nobis aliquam, dolorem numquam porro sapiente. Amet inventore corporis suscipit natus est sunt, laborum excepturi rerum, quasi sequi commodi placeat officiis nobis. Voluptate, error odit! Blanditiis laborum, nihil quo quas reprehenderit aspernatur cupiditate explicabo! Sint magnam nesciunt eligendi nostrum cumque, dolor saepe est quidem nihil consectetur, laborum soluta, accusamus doloremque. Rerum modi sapiente aliquam dolore itaque, voluptatibus tempore atque consequuntur maxime omnis recusandae quo quaerat laborum aspernatur possimus dolorem earum adipisci, non, excepturi quia! Iusto et repellendus inventore eligendi magnam, quae beatae numquam aliquam animi incidunt officia similique qui cumque. Fugit est deserunt rerum, assumenda eligendi, voluptatibus corporis sed qui minus doloribus officia esse sit sint earum veniam. Magnam ipsum ipsam aliquam doloribus magni a perspiciatis qui beatae blanditiis dolorum, aliquid nemo impedit omnis numquam expedita mollitia, quos assumenda necessitatibus quas. Ipsam rem voluptas delectus ipsa ratione! Optio, distinctio dicta. Unde id harum dolorem sed velit, impedit distinctio dignissimos error.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Laborum exercitationem quas ex! Nostrum quaerat eaque itaque repudiandae expedita dolores sapiente quia non hic obcaecati, tempora error quo facilis ut quas adipisci voluptatum voluptate, qui temporibus! Eveniet corporis molestiae sapiente, omnis nostrum quod consectetur at error velit aspernatur vero non illum quidem voluptates laboriosam molestias! Porro nobis, soluta cum laboriosam dolore delectus amet reprehenderit adipisci! Quis enim praesentium officiis voluptatum quasi, totam corporis vero sit, laboriosam beatae, nam ab! Molestias id amet impedit maxime cupiditate iure officiis, ad ipsum ipsam excepturi corrupti praesentium velit repellendus quo facilis? Officia recusandae nobis nemo fugiat iste id explicabo asperiores non quis rerum tempora repellendus necessitatibus error unde quam ea ratione autem quaerat est hic quia deserunt, doloremque aspernatur. Quos inventore enim perspiciatis illum voluptatibus officia voluptas molestiae eveniet consectetur eos voluptatem, tempore necessitatibus eius mollitia reiciendis aut ullam aspernatur aliquid nihil expedita nisi accusantium sunt quam dolorum. Natus sit sequi itaque ut, ex, maiores aspernatur magni nostrum ad ratione assumenda qui hic? Similique molestiae aperiam quae laudantium pariatur quibusdam, quidem provident ducimus, modi blanditiis sed? Recusandae, iure? Nihil laborum rerum adipisci tenetur aspernatur quas asperiores. Deserunt amet, veniam doloremque pariatur nisi et quis commodi voluptates error cumque modi inventore optio, tempore fugiat.</p>
<p>Totam, quod et tenetur officiis consequuntur laboriosam provident dicta unde placeat, expedita ad sit voluptas molestiae ipsam voluptatibus omnis, magni id sunt esse modi distinctio exercitationem? Saepe unde repudiandae enim dolor explicabo possimus vel quisquam cumque. Minus dolorem vitae, qui at facilis dicta tenetur quos aut corrupti nisi doloremque asperiores ab sint hic, laudantium eveniet. Alias iste tempora obcaecati dignissimos delectus nesciunt tenetur mollitia eum architecto officiis quas odit, quo magni, beatae accusamus asperiores eius facere, corrupti provident earum dicta laboriosam blanditiis esse libero! Aspernatur omnis iste sit, magni facere possimus ea provident officiis rerum ducimus similique natus neque suscipit incidunt repellat perspiciatis, itaque iure. Pariatur nesciunt libero rerum inventore? Nobis aperiam, nostrum odio facilis id animi atque provident hic dolorem quas fugit earum velit ratione qui ipsam repellendus ut sit omnis facere libero ex neque? Provident error ducimus modi magnam fuga, ex eveniet omnis earum sed magni at asperiores harum, veniam quidem perferendis. Dicta ab voluptates ipsum quas expedita eligendi voluptate praesentium, consequuntur harum qui eum veniam maiores in molestiae aliquid, totam quod officiis asperiores ex necessitatibus. Saepe porro unde dicta beatae consectetur provident quidem suscipit, sed laborum sit, doloribus expedita mollitia aliquam adipisci necessitatibus pariatur veniam laudantium sequi?</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Aperiam, fugit ipsam. Minus quaerat nesciunt eum iure architecto, exercitationem laudantium corporis quos quam odio repellendus, accusamus qui dolor vitae numquam suscipit debitis, amet eaque perferendis quasi doloremque. Sit sapiente nihil corporis mollitia placeat tenetur eius fuga quisquam quam, dignissimos, possimus aspernatur. Praesentium magnam obcaecati, vitae deserunt inventore dolorem aspernatur impedit laboriosam quae deleniti nesciunt, animi amet totam est eum delectus incidunt id quisquam sapiente labore sint ad ipsa dignissimos. Officia ipsum quis minus sapiente corrupti quasi eius iste unde distinctio ducimus voluptatum vitae perferendis, iusto cupiditate optio laborum veniam ex dolorum, dolores omnis! Repellat perspiciatis quidem, molestiae reprehenderit a aliquam, modi obcaecati voluptatum, iste expedita itaque non. Error atque fugiat sunt ab. Ullam, ipsam id! Sunt fugit maxime incidunt illum reprehenderit deserunt qui iste quisquam natus labore eveniet ut porro ab eos commodi consequuntur eum delectus quaerat, molestias, architecto obcaecati. Unde aliquam exercitationem numquam corrupti recusandae autem ratione animi voluptas. Laborum adipisci aperiam consequuntur dolorum dolor aspernatur rerum cum impedit harum vel, animi quaerat, magnam consectetur optio sunt assumenda! Eius tenetur nam fugiat voluptatibus dignissimos ipsum, aperiam sint delectus ab, reiciendis in voluptatem tempore optio. Numquam mollitia quis vero sequi, nisi tempore fuga ducimus doloremque a nostrum, praesentium id.</p>
<p>Consequatur, velit, fuga harum nam quod commodi esse tempora laboriosam exercitationem reiciendis veniam, fugit expedita. Vitae, doloremque? Ex similique saepe perferendis iste autem veniam aliquid, harum minus? Molestias nobis eaque inventore saepe similique et vero autem eveniet repellendus. Excepturi magnam dignissimos, consectetur unde in expedita praesentium possimus consequuntur quaerat corporis beatae nobis minus. Molestias, harum ut! Dolores distinctio, quo placeat nam obcaecati cupiditate voluptatem nemo? A suscipit placeat quas iusto impedit. Libero ipsam excepturi ipsum quam, animi laboriosam sapiente nostrum necessitatibus quas ea pariatur error explicabo quos consectetur ullam nihil odit? Voluptatem animi repellat rem inventore, repudiandae saepe laborum culpa nihil deleniti corporis. Nostrum reprehenderit recusandae consectetur, quaerat autem natus vitae. Soluta nemo quisquam adipisci cupiditate similique architecto, quam ab corporis harum suscipit quo est, iusto quod earum modi necessitatibus, asperiores ratione sunt animi voluptatum? Eveniet, adipisci illo nemo pariatur ut nisi impedit sint debitis reiciendis nihil, illum dicta cupiditate quo quidem, est laborum minima fugit. Autem fuga eligendi necessitatibus obcaecati temporibus aspernatur, ullam deserunt illum nulla voluptatum mollitia, suscipit odio, placeat molestias. Ullam harum aliquid, voluptate est nam commodi tenetur ut repellat vel quaerat. Sed cupiditate voluptatibus eveniet non aspernatur consequuntur pariatur molestiae magnam, quis, dolorem nemo aperiam impedit.</p><button data-modal-trigger="#my-modal">Click for modal</button>
.modal-backdrop 上的 pointer-events: all 阻碍了滚动，因为不知何故滚轮事件无法通过。
我需要稍微更改 JavaScript
/* ... */
/* CSS */
modal.active .modal-backdrop {
/* pointer-events: all */
}
/* ... */
// JavaScript
// ...
// var el2 = e.target.closest('.modal-backdrop');
// if (el1 || el2) {
var el2 = e.target.closest('.modal-window');
if (el1 || !el2) {
// ...
console.clear();
;(function(d) {
"use strict";
d.addEventListener('click', function(e) {
var el = e.target.closest('[data-modal-trigger]')
if (el) {
var selector = el.dataset.modalTrigger;
Array.from(d.querySelectorAll(selector)).forEach(function(el) {
el.classList.add('active');
})
d.documentElement.classList.add('with-modal')
}
var el1 = e.target.closest('.modal-close');
var el2 = e.target.closest('.modal-window');
if (el1 || !el2) {
e.target.closest('.modal').classList.remove('active')
d.documentElement.classList.remove('with-modal')
}
})
})(document);
html.with-modal body {
height: 100vh;
overflow-y: hidden;
padding-right: 17px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0s 1s;
transition: opacity 0s 1s;
overflow-y: scroll;
}
.modal.active {
opacity: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
pointer-events: all;
}
.modal-backdrop {
z-index: -1;
position: fixed;
top: 0;
right: 17px;
bottom: 0;
left: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 0.2s 0.3s linear;
transition: opacity 0.2s 0.3s linear;
pointer-events: none;
}
.modal.active .modal-backdrop {
opacity: 1;
/* pointer-events: all; */
}
.modal-window {
background-color: #fff;
flex-basis: auto;
width: auto;
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
border: 1px solid;
position: relative;
top: 25px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
margin: auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-align: stretch;
align-items: stretch;
padding: 20px;
opacity: 0;
}
.modal.active .modal-window {
flex-basis: content;
top: 0;
opacity: 1;
}
.modal-content {
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
}
.modal-close {
flex-basis: 40px;
padding: 10px;
box-sizing: border-box;
background-color: pink;
margin-left: auto;
color: red;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
cursor: pointer;
}
button {
border: 2px solid;
border-radius: 10px;
padding: 10px 20px;
background-color: lightgreen;
font-size: 20px;
margin: auto;
text-align: center;
}
<button data-modal-trigger="#my-modal">Click for modal</button>
<div class="region-modal">
<div class="modal" id="my-modal">
<div class="modal-window">
<div class="modal-close">Close</div>
<div class="modal-content">
<h2>My Modal</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos voluptatibus asperiores dolorem dicta veniam? Voluptatum reprehenderit maxime in perferendis sequi?</p>
<p>Id odit doloribus culpa perspiciatis reprehenderit pariatur labore magni fuga eos. Ipsum hic consequuntur delectus? Sapiente tempore dolorem eos aliquid!</p>
<p>Voluptatibus enim velit quasi vitae dolor sapiente ab excepturi iste, quos adipisci id ad quidem atque omnis amet! Eos, eligendi.</p>
<p>Nam culpa quo incidunt quaerat iure itaque, porro hic aperiam ducimus? Vel tempora unde nulla quisquam nisi facere expedita deserunt.</p>
<p>Sunt, minus tempore dignissimos pariatur eos modi at minima culpa nisi debitis ipsam nihil recusandae illum unde magni hic sint!</p>
<p>Veritatis minima excepturi nisi! Ex consectetur, asperiores iste laudantium voluptatem enim, possimus quae porro modi corporis pariatur, non est ratione!</p>
<p>Est consequatur amet dignissimos quibusdam veniam? Commodi qui voluptatum facilis hic? Quasi itaque illo facilis reiciendis, soluta sit maxime delectus?</p>
<p>Explicabo eos neque dolore similique illo illum soluta nulla eveniet! Facilis et ipsa quia asperiores vitae, dignissimos adipisci necessitatibus sed.</p>
<p>Corporis cumque est, nihil omnis possimus consequatur recusandae magnam quod, officia aut odio dolores distinctio nostrum et vitae, consequuntur provident?</p>
<p>Ipsam, quisquam ea magnam autem possimus, rem tempore doloribus, in amet ullam debitis facilis tenetur voluptas labore. Aperiam, quam libero?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, accusantium.</p>
<p>Numquam ea sint debitis voluptatem fuga tempore repudiandae architecto minima.</p>
<p>Quidem explicabo consequatur obcaecati quia nisi quisquam! Eligendi, vero dolor.</p>
<p>Eum cumque perspiciatis praesentium quae provident nobis, excepturi inventore culpa?</p>
<p>Veniam doloremque cupiditate repellat totam, dignissimos unde eaque mollitia a.</p>
<p>Dignissimos consequatur voluptatibus provident velit! Ea voluptas quia iste saepe?</p>
<p>Saepe, fugit cupiditate possimus enim veritatis repudiandae molestias accusamus iure?</p>
<p>Illo unde obcaecati repellendus tenetur, quam doloremque commodi voluptas sit?</p>
<p>Quibusdam velit enim totam amet quasi aperiam repudiandae beatae quia.</p>
<p>Corrupti repellat deleniti aliquid exercitationem! Magni repellendus ipsum quas minus.</p>
<p>Dolor nesciunt ducimus corporis illo dolores deleniti asperiores numquam inventore?</p>
<p>Ratione omnis cum labore consectetur sequi quam, facere qui rem.</p>
<p>Ratione nostrum quia ex quod debitis distinctio iure eligendi eum!</p>
<p>Sunt repudiandae omnis accusantium quidem ipsam corrupti ipsa at vel!</p>
<p>A quasi fugit animi ullam. Dolor dolore incidunt libero velit.</p>
<p>Optio ducimus officia dolor quis, consectetur numquam blanditiis asperiores magnam?</p>
<p>Porro aspernatur suscipit officiis veritatis a quo, earum eos sapiente!</p>
<p>Magnam hic veritatis at. Iste tempora fugit quaerat deserunt qui?</p>
<p>Temporibus excepturi iste harum recusandae aliquid omnis corporis rem iure.</p>
<p>Fugit aut placeat facere suscipit. Magni amet sunt omnis quisquam?</p>
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</div>
<h1>Scroll and modal</h1>
<p>Some scrolling content</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam delectus excepturi, fuga adipisci, deserunt culpa recusandae doloremque debitis non doloribus magnam reprehenderit maxime aut quaerat quam possimus fugit, voluptatem ab beatae reiciendis aperiam error. Explicabo quas necessitatibus cum enim vitae! Dicta maxime ea nam iusto ab reprehenderit placeat blanditiis numquam quam voluptates itaque, commodi aliquid deleniti natus dolorum unde sint. In quasi incidunt iure, repudiandae reiciendis inventore voluptatem modi facilis tempora maxime atque reprehenderit minus dolores neque exercitationem? Quisquam animi alias laudantium esse dicta molestiae ullam ipsum delectus culpa nemo nobis deserunt id, dolore minus. Perferendis ratione libero voluptate tempore fugiat modi, excepturi labore unde soluta ipsa asperiores molestias, corporis sapiente voluptatem distinctio nobis architecto. Ut facere sapiente ipsam inventore tempore architecto tempora officiis, laboriosam natus ea itaque consequatur. Error eum repellendus, perferendis deleniti qui quam voluptatem sint in sapiente eaque illo facilis minus ducimus ex officiis laudantium officia soluta suscipit debitis, recusandae eligendi, unde consectetur facere quasi. Neque corrupti asperiores deserunt eos corporis minima ex. Et a fuga in porro aspernatur quis veniam, repudiandae voluptatum eligendi cumque delectus, iusto voluptatem fugit maiores molestiae vel dolore impedit error. Vitae illo doloremque error totam id et veritatis earum eligendi placeat iste!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Magni illo animi maxime deleniti dolorem a, reprehenderit aut hic iure! Ipsam, eaque voluptates? Voluptates, cum porro. Rerum deserunt iste labore mollitia expedita doloribus reprehenderit eos quae ducimus debitis fugiat quasi molestias in illum accusamus quisquam ipsum dicta eius nemo modi, adipisci unde incidunt! Repellendus ad nihil fuga tempora nobis? Magni omnis, ea alias pariatur eligendi doloribus, adipisci laborum possimus maxime provident esse! Ullam similique ducimus quod unde culpa ipsa illum nisi aut aspernatur consequuntur assumenda neque nihil quam ipsum, eius suscipit eligendi. Optio est, illo aut reiciendis alias corporis! Dolorum omnis facilis similique labore ab laboriosam repudiandae magnam voluptatibus, iusto praesentium! Illum laudantium consectetur molestiae nulla voluptatibus consequuntur? Quas natus iure harum praesentium deleniti rem fuga quidem, sit sequi. Quod consequatur voluptatibus quas unde officia laborum expedita quaerat vero, facilis, nemo excepturi nobis iure repellat explicabo eius atque accusamus ex tempore. Cumque aliquam mollitia, provident iste quasi maxime, quod voluptatum fugit at accusantium vitae. Aperiam soluta nobis iusto incidunt non aspernatur nihil cumque eum vero commodi animi in, quasi deleniti doloremque earum reprehenderit officiis praesentium. Totam illum quod dolorum sequi placeat temporibus odit quis, doloribus ratione repellendus? Itaque et fuga illo cumque aliquam voluptatem magni laudantium fugiat nemo obcaecati.</p>
<p>Est iure, laboriosam sint quibusdam corrupti magni a minus repudiandae, incidunt autem consequuntur dolorem cumque eaque, nulla facere illum veritatis. Voluptatibus rerum fugiat iusto hic animi distinctio. Officiis, atque. Laboriosam excepturi iure quaerat exercitationem architecto optio laudantium, id amet dolores fugit ullam harum itaque nesciunt, at enim neque quam consectetur eveniet! Libero ex quos pariatur quaerat esse quas dolore praesentium in ipsam ab aut at expedita nam a soluta consequatur ducimus iusto rem voluptate laborum, dolorum quod veniam? Nihil accusamus quis ratione nemo beatae provident sequi ea ipsam quia explicabo quasi molestias voluptatum eius nostrum, modi sunt voluptate! Perspiciatis vitae voluptatibus quos ea optio perferendis minus repellendus a, ut tempora maiores beatae! Tempora impedit nesciunt ab dolore odit ipsa quia soluta illum! Explicabo dolorem molestiae fuga blanditiis, fugit commodi vitae ab non! Itaque veniam facere pariatur eius saepe ipsam incidunt numquam deleniti similique tempora? Doloribus natus architecto nulla vitae ullam ipsam fugiat maiores officia deleniti a, iure asperiores esse velit alias culpa? Nisi obcaecati, iste sequi officiis aliquam aut commodi vitae consequatur ea molestias sint eligendi ut dolore eveniet consectetur laborum quos natus cum quia molestiae explicabo id. A excepturi cumque porro vero nulla voluptate harum atque animi deleniti voluptas?</p>
<p>Ipsa esse dolor, dicta quis quod hic fugit quaerat repudiandae nobis cum voluptatem expedita amet tempora sed atque repellendus, cumque consequuntur iste adipisci quae aliquam ex sapiente corrupti? Quia numquam obcaecati nesciunt. Nisi quis cupiditate obcaecati at, nesciunt quae ipsum repellendus distinctio facilis ut architecto repellat explicabo impedit hic ex recusandae cum excepturi quisquam beatae sint fugiat, laboriosam blanditiis ratione. Veritatis accusamus quis totam et dignissimos, deserunt cumque quisquam amet eveniet ratione error autem ipsa maxime ducimus, voluptate, architecto nemo incidunt molestiae id. Saepe necessitatibus ipsam ad atque ullam quisquam maxime, soluta nemo voluptates corrupti mollitia praesentium, aliquam rem facilis ipsum deserunt perspiciatis autem animi quia commodi possimus! Consequuntur in nam sit hic temporibus aliquam. Amet alias, nobis exercitationem, veritatis nesciunt sit necessitatibus doloremque fugiat ullam rerum quia libero. Iste quaerat, totam labore qui provident eum sunt dolorem fugit facere dolorum quasi rem! Iste velit obcaecati aliquam maxime totam animi, harum labore vitae quos voluptates culpa earum quo, quibusdam explicabo eius nesciunt assumenda nulla natus, quae non ut dolorum nemo hic! Neque blanditiis molestiae esse ad laudantium, cum nostrum non alias nihil! Neque nostrum quam iste commodi consequatur obcaecati quibusdam ipsa corporis ut exercitationem rerum minima, facere aspernatur praesentium vitae.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Necessitatibus, deserunt vero aut reiciendis omnis adipisci in aspernatur officia exercitationem, fuga perferendis alias maxime eum odio! Officia, exercitationem? Magnam cum sequi at totam distinctio libero animi non doloribus odio quisquam commodi quaerat, culpa cupiditate voluptatum impedit sapiente reprehenderit odit aspernatur. Quasi mollitia saepe commodi tempora inventore adipisci voluptatem eius et aperiam nemo maiores ipsam corrupti, impedit numquam repudiandae illo voluptate! Error nihil repellendus numquam similique cum in assumenda eligendi accusantium, saepe, consequuntur repudiandae neque fugiat aperiam delectus vero eum atque! Hic nostrum deleniti quos rem velit ad pariatur sit recusandae distinctio corrupti, et fugiat. Beatae nobis obcaecati esse fugit at culpa consectetur, accusamus suscipit necessitatibus, maxime pariatur ipsa? Suscipit quaerat pariatur accusamus debitis vitae neque eos odio, quod qui ad, explicabo quae rem necessitatibus sunt corrupti deserunt minima voluptatem laudantium obcaecati illum aliquid velit doloremque molestias? Hic fuga debitis explicabo neque quaerat ratione est totam cumque eius tempore necessitatibus at eos, sequi veritatis perferendis numquam ducimus sit nisi iusto doloribus. Dolor a doloremque maiores ipsum expedita? Deleniti deserunt delectus iste iusto aspernatur quo, dolorem ipsum, modi nulla, accusamus quam a eius natus nisi id in neque explicabo nesciunt at harum labore eaque ratione molestias! Officiis delectus facere error tenetur?</p>
<p>Magni possimus necessitatibus voluptate nobis voluptatibus minima odio atque at neque similique natus, totam obcaecati harum qui? Vero molestiae laborum accusantium reprehenderit consectetur, nobis veniam ea praesentium vel soluta hic, dolore assumenda, accusamus fugit voluptatum totam delectus ut minima at autem nam dignissimos illum veritatis explicabo? Explicabo harum animi commodi adipisci ab totam expedita. Cum atque maiores perspiciatis. Similique eos commodi, rem, tenetur placeat reprehenderit unde fugit, qui at sed corrupti! Sapiente, minus sint possimus itaque facere, voluptate illo officiis nesciunt accusantium recusandae maxime blanditiis doloribus. Odit asperiores quis illo quasi obcaecati ipsa, commodi beatae labore voluptates, vel quo neque, enim reprehenderit iste rerum debitis quisquam! Esse, maiores atque! Maxime eligendi eaque delectus eum, aut necessitatibus ad? A, accusamus! Quos, harum pariatur nostrum delectus dolores corrupti, repellendus vel blanditiis rem laboriosam laudantium quam perspiciatis incidunt dignissimos voluptatibus, minus voluptas ducimus fugit veritatis similique. Repudiandae possimus autem quod! Repudiandae eos perferendis libero nihil, dolores harum. Dolorum eos eligendi sequi odit at molestias mollitia libero nemo illum, excepturi, in temporibus, necessitatibus velit officia nam quidem laudantium dolore delectus non aliquam. Hic libero earum consequatur maiores nesciunt sequi, atque reprehenderit ipsa quos odit unde aperiam omnis, vitae quod, laborum accusantium perspiciatis dolorum ratione?</p>
<p>Sunt dolore ratione excepturi tempore voluptatum voluptas consequatur reiciendis, harum eaque mollitia beatae natus dolorem dolorum atque at consequuntur quaerat. Mollitia, iusto dicta. Nulla ea dolores similique aliquid possimus, pariatur a saepe iusto aut veritatis voluptatibus assumenda animi nam nobis esse tempore, asperiores numquam maiores. Consequuntur saepe fugiat ipsum excepturi, non corporis eum aut dignissimos. Consequatur nesciunt laborum earum consectetur reprehenderit voluptate molestias quidem, deleniti quae tempore sequi. Tempora architecto a accusantium odio voluptates aliquam autem suscipit provident sit asperiores incidunt illum ducimus facilis, molestias, inventore mollitia! Atque provident odio soluta deserunt quisquam tenetur quae molestias magnam ex, sed culpa nulla fuga corporis vero maxime quidem mollitia facere. Illo et non perspiciatis consequatur nobis temporibus eveniet nulla aut quae animi facilis veritatis minus, recusandae fugiat odit atque! Natus beatae velit possimus repellendus, perspiciatis vero culpa voluptatem quia atque quos doloribus nostrum fuga cum ea. Accusamus officia numquam praesentium sapiente! Tenetur sed harum itaque maxime ea velit, dolor doloremque soluta natus libero tempore similique adipisci optio dolorem aut accusamus in ut vel quaerat, inventore veniam quis. Explicabo, ipsum temporibus saepe ad, libero consectetur adipisci amet quaerat placeat rem sit dolore fugiat cupiditate porro quod commodi expedita totam veniam. Reiciendis, consequuntur nostrum!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Voluptas odit dicta laudantium temporibus unde nesciunt repellendus asperiores incidunt consectetur! Accusantium quis dolorum eveniet quos atque voluptas amet! Iure quo nam alias, veniam hic totam quia voluptates dolorem quibusdam eum fuga enim sunt laudantium velit, ducimus doloremque omnis quae delectus explicabo quis sed. Voluptate, eius fugiat odio minima sapiente ut illo error molestiae, repellat exercitationem nesciunt sit iste earum provident reprehenderit? A, distinctio. Cupiditate magni eius eligendi atque et rerum dicta illo sequi voluptates esse dolores, ducimus corporis laudantium in eos accusantium temporibus delectus vel quidem dolor repudiandae numquam libero officiis non? Commodi nostrum doloribus officiis hic doloremque, corporis rerum harum dolore eum quia voluptatibus inventore at sapiente consequatur laudantium quos quaerat vero? Voluptates modi ut totam aliquid laudantium consequuntur beatae odio tempore iusto officiis exercitationem, animi quos, dignissimos voluptatibus quas ad eaque. Nam, repellendus numquam veniam excepturi inventore iusto non accusantium eaque corporis laboriosam ipsa at modi recusandae atque perspiciatis. Ab doloribus animi unde eaque cumque esse, sint qui suscipit earum magni provident labore, velit, ipsam inventore veniam reiciendis officia voluptas sequi quisquam impedit? Ut laborum magnam a iusto? Assumenda quidem expedita laudantium vero! Quos soluta, magni nemo ipsa ratione incidunt eius nihil facilis? Rerum corporis iure eligendi.</p>
<p>Inventore obcaecati reprehenderit, corporis repellendus, possimus velit vel alias, id voluptate eaque voluptatem numquam eveniet nostrum? Ab vel, illo consectetur quas beatae repudiandae error vero quam dolorum quasi velit aut iure! Totam nemo perferendis velit quidem adipisci reprehenderit molestias optio pariatur doloremque reiciendis repellat repellendus blanditiis error a ratione laudantium nobis aliquam, dolorem numquam porro sapiente. Amet inventore corporis suscipit natus est sunt, laborum excepturi rerum, quasi sequi commodi placeat officiis nobis. Voluptate, error odit! Blanditiis laborum, nihil quo quas reprehenderit aspernatur cupiditate explicabo! Sint magnam nesciunt eligendi nostrum cumque, dolor saepe est quidem nihil consectetur, laborum soluta, accusamus doloremque. Rerum modi sapiente aliquam dolore itaque, voluptatibus tempore atque consequuntur maxime omnis recusandae quo quaerat laborum aspernatur possimus dolorem earum adipisci, non, excepturi quia! Iusto et repellendus inventore eligendi magnam, quae beatae numquam aliquam animi incidunt officia similique qui cumque. Fugit est deserunt rerum, assumenda eligendi, voluptatibus corporis sed qui minus doloribus officia esse sit sint earum veniam. Magnam ipsum ipsam aliquam doloribus magni a perspiciatis qui beatae blanditiis dolorum, aliquid nemo impedit omnis numquam expedita mollitia, quos assumenda necessitatibus quas. Ipsam rem voluptas delectus ipsa ratione! Optio, distinctio dicta. Unde id harum dolorem sed velit, impedit distinctio dignissimos error.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Laborum exercitationem quas ex! Nostrum quaerat eaque itaque repudiandae expedita dolores sapiente quia non hic obcaecati, tempora error quo facilis ut quas adipisci voluptatum voluptate, qui temporibus! Eveniet corporis molestiae sapiente, omnis nostrum quod consectetur at error velit aspernatur vero non illum quidem voluptates laboriosam molestias! Porro nobis, soluta cum laboriosam dolore delectus amet reprehenderit adipisci! Quis enim praesentium officiis voluptatum quasi, totam corporis vero sit, laboriosam beatae, nam ab! Molestias id amet impedit maxime cupiditate iure officiis, ad ipsum ipsam excepturi corrupti praesentium velit repellendus quo facilis? Officia recusandae nobis nemo fugiat iste id explicabo asperiores non quis rerum tempora repellendus necessitatibus error unde quam ea ratione autem quaerat est hic quia deserunt, doloremque aspernatur. Quos inventore enim perspiciatis illum voluptatibus officia voluptas molestiae eveniet consectetur eos voluptatem, tempore necessitatibus eius mollitia reiciendis aut ullam aspernatur aliquid nihil expedita nisi accusantium sunt quam dolorum. Natus sit sequi itaque ut, ex, maiores aspernatur magni nostrum ad ratione assumenda qui hic? Similique molestiae aperiam quae laudantium pariatur quibusdam, quidem provident ducimus, modi blanditiis sed? Recusandae, iure? Nihil laborum rerum adipisci tenetur aspernatur quas asperiores. Deserunt amet, veniam doloremque pariatur nisi et quis commodi voluptates error cumque modi inventore optio, tempore fugiat.</p>
<p>Totam, quod et tenetur officiis consequuntur laboriosam provident dicta unde placeat, expedita ad sit voluptas molestiae ipsam voluptatibus omnis, magni id sunt esse modi distinctio exercitationem? Saepe unde repudiandae enim dolor explicabo possimus vel quisquam cumque. Minus dolorem vitae, qui at facilis dicta tenetur quos aut corrupti nisi doloremque asperiores ab sint hic, laudantium eveniet. Alias iste tempora obcaecati dignissimos delectus nesciunt tenetur mollitia eum architecto officiis quas odit, quo magni, beatae accusamus asperiores eius facere, corrupti provident earum dicta laboriosam blanditiis esse libero! Aspernatur omnis iste sit, magni facere possimus ea provident officiis rerum ducimus similique natus neque suscipit incidunt repellat perspiciatis, itaque iure. Pariatur nesciunt libero rerum inventore? Nobis aperiam, nostrum odio facilis id animi atque provident hic dolorem quas fugit earum velit ratione qui ipsam repellendus ut sit omnis facere libero ex neque? Provident error ducimus modi magnam fuga, ex eveniet omnis earum sed magni at asperiores harum, veniam quidem perferendis. Dicta ab voluptates ipsum quas expedita eligendi voluptate praesentium, consequuntur harum qui eum veniam maiores in molestiae aliquid, totam quod officiis asperiores ex necessitatibus. Saepe porro unde dicta beatae consectetur provident quidem suscipit, sed laborum sit, doloribus expedita mollitia aliquam adipisci necessitatibus pariatur veniam laudantium sequi?</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Aperiam, fugit ipsam. Minus quaerat nesciunt eum iure architecto, exercitationem laudantium corporis quos quam odio repellendus, accusamus qui dolor vitae numquam suscipit debitis, amet eaque perferendis quasi doloremque. Sit sapiente nihil corporis mollitia placeat tenetur eius fuga quisquam quam, dignissimos, possimus aspernatur. Praesentium magnam obcaecati, vitae deserunt inventore dolorem aspernatur impedit laboriosam quae deleniti nesciunt, animi amet totam est eum delectus incidunt id quisquam sapiente labore sint ad ipsa dignissimos. Officia ipsum quis minus sapiente corrupti quasi eius iste unde distinctio ducimus voluptatum vitae perferendis, iusto cupiditate optio laborum veniam ex dolorum, dolores omnis! Repellat perspiciatis quidem, molestiae reprehenderit a aliquam, modi obcaecati voluptatum, iste expedita itaque non. Error atque fugiat sunt ab. Ullam, ipsam id! Sunt fugit maxime incidunt illum reprehenderit deserunt qui iste quisquam natus labore eveniet ut porro ab eos commodi consequuntur eum delectus quaerat, molestias, architecto obcaecati. Unde aliquam exercitationem numquam corrupti recusandae autem ratione animi voluptas. Laborum adipisci aperiam consequuntur dolorum dolor aspernatur rerum cum impedit harum vel, animi quaerat, magnam consectetur optio sunt assumenda! Eius tenetur nam fugiat voluptatibus dignissimos ipsum, aperiam sint delectus ab, reiciendis in voluptatem tempore optio. Numquam mollitia quis vero sequi, nisi tempore fuga ducimus doloremque a nostrum, praesentium id.</p>
<p>Consequatur, velit, fuga harum nam quod commodi esse tempora laboriosam exercitationem reiciendis veniam, fugit expedita. Vitae, doloremque? Ex similique saepe perferendis iste autem veniam aliquid, harum minus? Molestias nobis eaque inventore saepe similique et vero autem eveniet repellendus. Excepturi magnam dignissimos, consectetur unde in expedita praesentium possimus consequuntur quaerat corporis beatae nobis minus. Molestias, harum ut! Dolores distinctio, quo placeat nam obcaecati cupiditate voluptatem nemo? A suscipit placeat quas iusto impedit. Libero ipsam excepturi ipsum quam, animi laboriosam sapiente nostrum necessitatibus quas ea pariatur error explicabo quos consectetur ullam nihil odit? Voluptatem animi repellat rem inventore, repudiandae saepe laborum culpa nihil deleniti corporis. Nostrum reprehenderit recusandae consectetur, quaerat autem natus vitae. Soluta nemo quisquam adipisci cupiditate similique architecto, quam ab corporis harum suscipit quo est, iusto quod earum modi necessitatibus, asperiores ratione sunt animi voluptatum? Eveniet, adipisci illo nemo pariatur ut nisi impedit sint debitis reiciendis nihil, illum dicta cupiditate quo quidem, est laborum minima fugit. Autem fuga eligendi necessitatibus obcaecati temporibus aspernatur, ullam deserunt illum nulla voluptatum mollitia, suscipit odio, placeat molestias. Ullam harum aliquid, voluptate est nam commodi tenetur ut repellat vel quaerat. Sed cupiditate voluptatibus eveniet non aspernatur consequuntur pariatur molestiae magnam, quis, dolorem nemo aperiam impedit.</p><button data-modal-trigger="#my-modal">Click for modal</button>