如何防止弹出窗口时出现滚动条？

Question

Hello everyone~ I would like to ask that I am currently making a pop-up window, and I have a problem!大家好~请问我目前正在制作弹窗，有问题！ It's because of the excessive content of the website that scrolls will appear when the pop-up window appears, so when the mouse is scrolled, the text behind it will still scroll.是因为出现弹窗时会出现滚动的网站内容过多，所以当鼠标滚动时，后面的文字还是会滚动。

I am a beginner in programming and I don't know how to prevent scrolls from appearing.我是编程初学者，我不知道如何防止出现卷轴。 Don't let the content of the rear website scroll?不让后面的网站内容滚动？

 // 點按鈕彈出廣告$(function(){ $('.js-btn').click(function(){ $('.js-ad').fadeIn(); }); }) // 點關閉按鈕關閉廣告$(function(){ $('.js-close').click(function(){ $('.js-ad').fadeOut(); }); }) // 點灰色區域關閉廣告，但是藍色區域不關閉$(function(){ $('.js-ad').click(function(e){ if(e.target.classList.contains('js-ad')){ $(this).fadeOut(); } }) })

 body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; } .btn { text-decoration: none; padding: 30px; background-color: #ee3f4d; color: #fff; border-radius: 8px; transition: 0.5s; } .btn:hover { background-color: #ea1725; box-shadow: 0px 6px 2px rgba(0, 0, 0, 0.1); } .ad { position: fixed; justify-content: center; align-items: center; display: none; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 99999; } .card { width: 300px; height: 300px; text-align: center; display: flex; justify-content: center; flex-direction: column; align-items: center; background-color: #0f7bff; color: #fff; border-radius: 20px; padding: 10px; line-height: 2; } .card .close { display: inline-block; text-decoration: none; padding: 10px; background-color: #e5f75b; color: #222; border-radius: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <a href="#" class="btn js-btn">點擊出現廣告視窗</a> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam inventore et reiciendis id commodi vero dignissimos laborum rem. Unde qui nam quia totam ut dolores. Pariatur debitis a eveniet ipsum voluptatum, maxime corporis praesentium nesciunt labore facere culpa voluptate rerum neque laborum perspiciatis. Officiis mollitia, provident ut aliquid incidunt corporis sapiente id. Architecto dicta ipsam neque dignissimos autem cum quae distinctio assumenda, doloribus nulla numquam corporis beatae quidem voluptatum? Vero consequuntur aperiam inventore fugit odio temporibus reprehenderit voluptate maiores. Magni magnam fugit reprehenderit adipisci explicabo, eius, esse odio tempore modi nihil obcaecati dolorem vel ad veniam labore amet molestiae, nostrum eligendi aliquid. Placeat autem, odio nihil consequuntur dolorem expedita fugiat quae accusamus distinctio sit tempora. Fugit, quidem expedita aspernatur ipsum non praesentium ad harum nemo animi aliquid nulla voluptates ducimus laudantium. Ex, nesciunt autem totam et minima, libero a dicta magnam unde ullam repudiandae! Ab quis tenetur beatae reiciendis, omnis quidem dignissimos, mollitia deleniti a eaque, possimus blanditiis impedit eveniet amet distinctio? Eaque veritatis repudiandae voluptatum. Nobis reiciendis rem, provident autem aliquam deserunt voluptatibus, omnis possimus temporibus, sequi dolorum? Doloribus, obcaecati? Quae ut cupiditate iste nesciunt, ratione quod quis porro ea explicabo dolorem vitae deleniti commodi fugiat sit. Recusandae natus hic magnam dolor aliquam deleniti aperiam quisquam iure, voluptates dolorum nam repudiandae similique temporibus, totam, perspiciatis iusto eum nemo? Quibusdam incidunt culpa officia blanditiis unde debitis, dolore cum perferendis veniam, velit eos. Tempore vel modi pariatur eius saepe nihil necessitatibus hic, fugiat minima qui est id at! Ducimus quaerat veritatis adipisci nemo ut quos ipsum hic architecto, incidunt eveniet laborum eligendi, doloribus quod beatae numquam aspernatur quis porro illum qui, magni maiores natus aliquid. Atque, amet. Repellendus odio eveniet nisi, animi voluptates voluptatum maxime quae consequatur deserunt corporis repellat odit maiores provident alias ipsa earum ipsam! Alias deleniti officiis cumque repellat. Voluptates nemo repellendus cumque suscipit veniam distinctio dolor voluptatem rem debitis, consectetur molestias perferendis neque, impedit quam non ipsa. Corporis ipsa laborum iusto quidem commodi, quas corrupti recusandae officiis qui animi, dolores velit eius dicta ratione iure voluptatibus! Unde voluptatibus praesentium animi. Magnam minus illum nulla repellendus, sapiente, repellat earum illo omnis, maxime quia tenetur consectetur pariatur eos sit deserunt corrupti commodi dolores. Dolore impedit optio nemo quis at, nesciunt consectetur harum cupiditate. Nesciunt voluptatum sequi saepe sit omnis ut at vitae neque, beatae consequatur, sunt modi, voluptas doloremque natus. Eveniet, autem suscipit libero molestias iusto velit accusamus accusantium tenetur vel minus nesciunt, enim unde esse officia omnis. Fugiat dolore rem blanditiis necessitatibus qui, sit eaque corporis labore ipsa placeat fugit dolorum dolores assumenda dolor. Velit, a alias dicta fugiat vitae nisi doloremque amet quisquam natus porro asperiores perferendis nobis illum consequuntur veritatis cupiditate suscipit veniam. Praesentium dignissimos ex debitis nihil, numquam earum ad voluptatibus iste pariatur atque repellat consectetur reprehenderit? Nobis quisquam, sapiente consectetur reprehenderit modi doloremque nulla iste veniam esse recusandae facere ab quo officiis, placeat accusantium, aliquid fugit rerum similique voluptate. Dolorum magni quas sequi corporis architecto, dignissimos cupiditate recusandae! Temporibus suscipit at mollitia odio ipsa! Saepe harum odit esse dolores magnam eos rem quo animi laboriosam. Debitis repudiandae laborum, ex dolores natus dolorum! Rerum nam, sunt corrupti voluptatum quisquam debitis pariatur molestias repudiandae consectetur, rem quae inventore saepe vitae dolor. Repudiandae quas laudantium quo dignissimos ad ea illum delectus, dolorum animi culpa. Impedit dolorem expedita soluta quisquam id consequatur quam esse laborum maxime amet, quae ipsum iusto et nihil voluptas aut magnam laboriosam repudiandae, facere optio architecto officia, quidem ex eos. Doloremque saepe praesentium amet deleniti dolor culpa illo itaque quibusdam, quia, iusto id! Blanditiis fuga deserunt perspiciatis similique nisi ea, sed quia ipsum perferendis dolor porro quibusdam explicabo, itaque quam voluptates laboriosam repudiandae commodi a dolore tempora autem sunt vero? In doloremque voluptas quae, possimus ducimus blanditiis maxime laudantium aliquid ex. Dolor ipsam rerum unde asperiores ipsa fugiat eum. Explicabo quos sequi expedita rerum amet suscipit, possimus non illo accusamus, enim praesentium mollitia rem recusandae pariatur sapiente error. Quod in, aliquid aliquam eum sequi nemo sint, enim facilis cupiditate laboriosam incidunt praesentium atque recusandae laborum sapiente ducimus. Aperiam laboriosam distinctio non velit, itaque a illum blanditiis sequi provident architecto? Dolorum quibusdam laboriosam officia asperiores labore exercitationem ipsa animi odit! Rem saepe nobis tempore quis modi, odit quidem odio. Maxime magni animi ipsum enim vitae, eaque omnis eos, perspiciatis soluta architecto iste? Consequatur maxime sed eaque accusamus expedita. Delectus nam perferendis totam? Error labore voluptate maiores esse. Molestiae, laborum eligendi. Tempora est culpa, hic quas nemo iste numquam doloribus sunt qui dolores nostrum odio fugit labore voluptates modi cupiditate laboriosam odit architecto quasi ullam! Quo laudantium modi aperiam dignissimos harum repellendus? Maiores, rerum praesentium dolor, magni eos, provident officia libero aliquid optio architecto repudiandae nostrum deserunt cum earum accusantium nobis itaque commodi facilis. Eius optio vel adipisci nesciunt iste, quae recusandae sint cumque, corrupti, reprehenderit enim quas maiores totam facere illo labore porro sapiente sed ea quod atque quam. Maxime quidem voluptates error sequi ullam! Ipsa, ex incidunt commodi cupiditate exercitationem modi dicta. Assumenda, earum modi eum commodi officiis architecto quibusdam cumque molestias porro sapiente repellat, sequi dolores, voluptatibus odio. Qui dignissimos numquam repudiandae consequatur corrupti. Sit corrupti beatae vel, labore quam, cum aspernatur aliquam minima tempora commodi velit eveniet nostrum neque necessitatibus sunt ea mollitia porro eligendi, fuga possimus veniam quia. Mollitia magnam minima dolorem ex molestias quis esse vel dolore qui, aut commodi quasi aliquam vitae blanditiis in voluptatibus obcaecati consequatur consequuntur ducimus ipsa facilis illum. Vel laboriosam nihil necessitatibus, incidunt cupiditate nisi corrupti ipsam vero velit accusamus, dolore voluptatibus exercitationem atque. Molestiae necessitatibus error sint. Iusto temporibus error voluptas corrupti tenetur dignissimos mollitia similique aspernatur, quas, ipsam iste voluptate? Adipisci vel animi ea, id aspernatur maiores ipsam labore quia perferendis delectus. Debitis autem praesentium quae, nulla sapiente, cupiditate quo iure dignissimos dolores deserunt magni laudantium nostrum facere earum odio accusantium reprehenderit fugit laboriosam. Pariatur rem delectus, perferendis provident distinctio iste tempora cumque! Vero error ab amet praesentium expedita debitis ut, soluta alias dolores ea dolore placeat architecto reiciendis voluptatum totam eaque laboriosam.</p> <div class="ad js-ad"> <div class="card js-card"> <h2>我是廣告</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, fugiat.</p> <a href="javaScript:;" class="close js-close">關閉</a> </div> </div> </body>

Answer 1

You can toggle a class in your function that will add an overflow-y: hidden to your body and remove it when you run the fadeOut() function.您可以在您的函数中切换一个类，该类将添加一个overflow-y: hidden到您的正文中，并在您运行fadeOut()函数时将其删除。

NOTE: I changed the elements in the modal as something in your code was breaking the snippit.注意：我更改了模态中的元素，因为您的代码中的某些内容破坏了代码段。 Prolly the javascript in the a href. Prolly 在 a href 中的 javascript。

 // 點按鈕彈出廣告$(function() { $('.js-btn').click(function() { $('.modal').fadeIn(); // optional to add flex display when faded in $('.modal').css('display', 'flex') $(document.body).addClass('no-scroll'); }); }) // 點關閉按鈕關閉廣告$(function() { $('.modal-close').click(function() { $('.modal').fadeOut(); $(document.body).removeClass('no-scroll'); }); }) // 點灰色區域關閉廣告，但是藍色區域不關閉$(function() { $('.modal').click(function(e) { if (e.target.classList.contains('modal')) { $(this).fadeOut(); $(document.body).removeClass('no-scroll'); } }) })

 body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: start; position: relative; } .par { height: 3000px; } .btn { text-decoration: none; padding: 30px; background-color: #ee3f4d; color: #fff; border-radius: 8px; transition: 0.5s; } .btn:hover { background-color: #ea1725; box-shadow: 0px 6px 2px rgba(0, 0, 0, 0.1); } .modal { position: fixed; justify-content: center; align-items: center; display: none; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 99999; } .modal-card { width: 300px; height: 300px; text-align: center; display: flex; justify-content: center; flex-direction: column; align-items: center; background-color: #0f7bff; color: #fff; border-radius: 20px; padding: 10px; line-height: 2; } /* added the class to toggle the overflow-y on the body when the JS function to fadeIn()/fadeOut() is fired */ .no-scroll { overflow: hidden; } .modal-card .close { display: inline-block; text-decoration: none; padding: 10px; background-color: #e5f75b; color: #222; border-radius: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" class="btn js-btn">點擊出現廣告視窗</a> <p class="par"> Mollitia magnam minima dolorem ex molestias quis esse vel dolore qui, aut commodi quasi aliquam vitae blanditiis in voluptatibus obcaecati consequatur consequuntur ducimus ipsa facilis illum. Vel laboriosam nihil necessitatibus, incidunt cupiditate nisi corrupti ipsam vero velit accusamus, dolore voluptatibus exercitationem atque. Molestiae necessitatibus error sint. Iusto temporibus error voluptas corrupti tenetur dignissimos mollitia similique aspernatur, quas, ipsam iste voluptate? Adipisci vel animi ea, id aspernatur maiores ipsam labore quia perferendis delectus. Debitis autem praesentium quae, nulla sapiente, cupiditate quo iure dignissimos dolores deserunt magni laudantium nostrum facere earum odio accusantium reprehenderit fugit laboriosam. Pariatur rem delectus, perferendis provident distinctio iste tempora cumque! Vero error ab amet praesentium expedita debitis ut, soluta alias dolores ea dolore placeat architecto reiciendis voluptatum totam eaque laboriosam.</p> <div class="modal"> <div class="modal-card"> <h2>This is a header</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, fugiat.</p> <button class="modal-close">Close</button> </div> </div>

如何防止弹出窗口时出现滚动条？

问题描述

1 个解决方案

解决方案1
3 已采纳 2021-07-02 03:01:13

如何防止弹出窗口时出现滚动条？

问题描述

1 个解决方案

解决方案1 3 已采纳 2021-07-02 03:01:13

解决方案1
3 已采纳 2021-07-02 03:01:13