隐藏时删除模态窗口链接
[英]Remove modal window link when is hidden
问题描述
I have a modal window with a link. 
我有一个带链接的模态窗口。 The script uses CSS visibility to show and hide the window, but when is hidden, the link remains active disabling the page links inside the modal window area. 该脚本使用CSS可见性来显示和隐藏窗口，但是当隐藏时，该链接将保持活动状态，从而禁用模态窗口区域内的页面链接。
Any help? 有什么帮助吗？
This is an external HTML sample because the external links doesn't work on the snippet. 这是一个外部HTML示例，因为外部链接不适用于该代码段。 The modal window links to google.com and the page text links to stackoverflow.com. 模态窗口链接到google.com，页面文本链接到stackoverflow.com。
jQuery(document).ready(function($){ window.onload = setTimeout(function (){ $(".bts-popup").delay(5000).addClass('is-visible'); }, 3000); window.onload = setTimeout(function (){ $(".FOLLETO").delay(5000).addClass('is-visible'); }, 3000); //close popup $('.bts-popup').on('click', function(event){ if( $(event.target).is('.close') || $(event.target).is('.bts-popup') || $(event.target).is('.bts-popup-container') ) { event.preventDefault(); $(this).removeClass('is-visible'); } }); //close popup when clicking the esc keyboard button $(document).keyup(function(event){ if(event.which=='27'){ $('.bts-popup').removeClass('is-visible'); } }); });
.bts-popup { position: fixed; overflow:auto; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 25, 28, 0.55); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; z-index: 9999; } .bts-popup.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 1s 0s, visibility 1s 0s; -moz-transition: opacity 1s 0s, visibility 1s 0s; transition: opacity 1s 0s, visibility 1s 0s; } .bts-popup-container { position: relative; width: 100%; max-width: 600px; margin: 8em auto; text-align: center; /* Force Hardware Acceleration in WebKit */ -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .bts-popup .close { position: absolute; top: 0%; right: 2%; font-size: 4em; font-weight: bold; text-decoration: none; color: #FF9760; } .bts-popup .close:hover { color: #FC621A; } .FOLLETO { opacity: 0; visibility: hidden;} .FOLLETO.is-visible {opacity: 1; visibility: visible; -webkit-animation: spin1 0.5s 1 linear; -moz-animation: spin1 0.5s 1 linear; -o-animation: spin1 0.5s 1 linear; -ms-animation: spin1 0.5s 1 linear; animation: spin1 0.5s 1 linear; display: block; } @-webkit-keyframes spin1 { 0% { -webkit-transform: rotateX(0deg) scale(0.1)} 100% { -webkit-transform: rotateX(360deg) scale(1)} } @-moz-keyframes spin1 { 0% { -webkit-transform: rotateX(0deg) scale(0.1)} 100% { -webkit-transform: rotateX(360deg) scale(1)} } @-o-keyframes spin1 { 0% { -webkit-transform: rotateX(0deg) scale(0.1)} 100% { -webkit-transform: rotateX(360deg) scale(1)} } @-ms-keyframes spin1 { 0% { -webkit-transform: rotateX(0deg) scale(0.1)} 100% { -webkit-transform: rotateX(360deg) scale(1)} } @-keyframes spin1 { 0% { -webkit-transform: rotateX(0deg) scale(0.1)} 100% { -webkit-transform: rotateX(360deg) scale(1)} }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body style="background-color:red; "><div style="height:100%; width:100%; font-size:120px; text-align:center; padding-top:200px"><a href="https://stackoverflow.com/">hello</a></div> <div class="bts-popup" role="alert"> <a href="#page" class="close">×</a> <div class="bts-popup-container"> <a class="FOLLETO" href="https://google.com"> <img src="https://orig00.deviantart.net/4740/f/2013/164/9/8/rainbow_text_art_by_shadowcal-d68vjm8.jpg" width="100%"></a> </div> </div> </body>
1 个解决方案
解决方案1
1 已采纳 2018-04-05 01:08:15
There are a bunch of ways to do it but the most immediate would be using display: none in place of visible . 有很多方法可以做到，但是最直接的方法是使用display: none方法visible代替visible 。
Visbility leaves it smack on the page even tho its "invisible", which is not what you want . 可见性甚至在页面“看不见”时也会使它残留在页面上，这不是您想要的 。
Now if display: none is not applicable for your use case, you could also go with something like modifying the width . 现在，如果display: none不适用于您的用例，则还可以进行诸如width修改之类的操作。 Eg The popup is set by default to width: 0 but the class is-visible would then set width: 100 . 例如，默认情况下，将弹出窗口设置为width: 0但是该类is-visible ，然后将其设置为width: 100 。
You could also play with z-index but the two rules above are way more straightforward, I think. 您也可以使用z-index但我认为上面的两个规则更加简单。
Edit w/ example of using width in this way: https://codepen.io/uncleoptimus/pen/gedorQ 编辑以这种方式使用width示例： https : //codepen.io/uncleoptimus/pen/gedorQ
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.