为桌面上的退出弹出窗口创建背景

【问题标题】：Creating background for an exit popup on a desktop为桌面上的退出弹出窗口创建背景
【发布时间】：2021-12-18 08:05:40
【问题描述】：

我现在在一个网站上工作，我必须为几个页面创建一个退出弹出窗口。我已经创建了弹出窗口，但它的背景保持活跃。所以发生的事情是，当我对其进行测试时，一旦您将光标移离窗口，就会显示弹出窗口，这表明弹出窗口工作正常。但我也期待一种背景模糊，所以当我打开弹出窗口时，我希望我的背景保持暗淡或模糊。我已经尝试了几次但失败了。我已经粘贴了下面的代码。任何人都可以加入并帮助我吗？提前致谢！！

<!DOCTYPE html>
<html>
 
<head>
              <!-- jQuery cdn link -->
              <script src=
                             https://code.jquery.com/jquery-3.5.1.min.js>
              </script>
             
              <style type="text/css">
                             .content {
                                           position: fixed;
                                           top: 50%;
                                           left: 50%;
                                           
            background-image: url('');
                                           transform: translate(-50%, -50%);
                                           width: 500px;
                                           height: auto;
                                           text-align: center;
                                           box-sizing: border-box;
                                           padding: 15px;
                                           z-index: 100;
                                           display: none;
            color: #fff;
            text-align: center;
                                           /to hide popup initially/
                             }
                            
                             .close-btn {
                                           position: absolute;
                                           right: 20px;
                                           top: 15px;
                                           color: white;
                                           border-radius: 50%;
                                           padding: 4px;
                                           cursor: pointer;
                             }
 
        .text-wrapper{
            margin:20px 60px;
        }
        .popup-text{
            font-size: 18px;
        }
        .popup-text-small{
            font-size: 12px;
        }
        .popup-text-large{
            font-size: 48px;
            font-weight: bolder;
        }
        p{
            margin: 5px;
        }
        .box{
            border: 1px solid white;
            margin: 20px 50px;
        }
        .links{
            display: flex;
            justify-content: space-evenly;
            margin: 10px 50px;
        }
        .links a {
            border: 1px solid white;
            padding: 0 22px;
            border-radius: 20px;
            color: red;
            background-color: #fff;
        }
       
              </style>
</head>
 
<body>
 
 
              <!-- div containing the popup -->
              <div class="content">
                             <div class="close-btn">
                                           ×
                             </div>
        <div class="text-wrapper">
                             <p class="popup-text">Here you are!</p>
        <p class="popup-text-large">$ 12</p>
        <p class="popup-text">for your limited edition</p>
        <p> with CocaCola</p>
        <div class="links">
            <a href="" target="_self">Click Here to Subscribe</a>
            <a href="" target="_self">Click here to Login</a>
        </div>
        </div>
              </div>
 
              <script type="text/javascript">
             
                             // Function to show and hide the popup
                             function togglePopup() {
                                           jQuery(".content").toggle();
                             }
                             jQuery(window).on("mouseleave",function(){
if(jQuery('.content [class="text-wrapper"] .popup-text:visible').length==0 && typeof _satellite.cookie.get('popupshown')=='undefined'){
_satellite.cookie.set('popupshown',true);
togglePopup();
}
})
jQuery(document).on('click', '[class="close-btn"]', function(event) {
togglePopup();
})
              </script>
</body>
 
</html>

【问题讨论】：

标签： javascript html css


【解决方案1】：

如果你对沉闷的效果没意见，我会为此放置一个 div 并沿着内容切换它：

// Function to show and hide the popup
var popupshown //This is for replacing the cookie validation.

function togglePopup() {
  jQuery(".content").toggle();
  jQuery(".dull").toggle(); //toggle dull effect.
}

jQuery(window).on("mouseleave", function() {
  if (jQuery('.content [class="text-wrapper"] .popup-text:visible').length == 0 && typeof popupshown == 'undefined') {
    popupshown = true
    togglePopup();
  }
})
jQuery(document).on('click', '[class="close-btn"]', function(event) {
  togglePopup();
})
.dull { /*Applies to the size of container, which is body.*/
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.content {
  position: fixed;
  display: none;
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  width: 500px;
  height: auto;
  text-align: center;
  box-sizing: border-box;
  padding: 15px;
  z-index: 100;
  color: #fff;
}

.close-btn {
  position: absolute;
  right: 20px;
  top: 15px;
  color: white;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
}

.text-wrapper {
  margin: 20px 60px;
}

.popup-text {
  font-size: 18px;
}

.popup-text-small {
  font-size: 12px;
}

.popup-text-large {
  font-size: 48px;
  font-weight: bolder;
}

p {
  margin: 5px;
}

.box {
  border: 1px solid white;
  margin: 20px 50px;
}

.links {
  display: flex;
  justify-content: space-evenly;
  margin: 10px 50px;
}

.links a {
  border: 1px solid white;
  padding: 0 22px;
  border-radius: 20px;
  color: red;
  background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dull"></div> <!--The effect is not a parent of content so we don't apply it to the popup-->
   <div class="content">
     <div class="close-btn">
       ×
     </div>
     <div class="text-wrapper">
       <p class="popup-text">Here you are!</p>
       <p class="popup-text-large">$ 12</p>
       <p class="popup-text">for your limited edition</p>
       <p> with CocaCola</p>
       <div class="links">
         <a href="" target="_self">Click Here to Subscribe</a>
         <a href="" target="_self">Click here to Login</a>
       </div>
     </div>
   </div>

如果你应用模糊效果，你可以使用filter: blur(2px)，但是要考虑到它只会对暗淡的div内容应用过滤器，所以body中的元素不会受到影响。如果您将过滤器直接应用于主体，所有元素，包括弹出窗口，都会受到模糊效果的影响。因此，您必须在 .dull div 中处理 html 才能在其中获得效果。

// Function to show and hide the popup
var popupshown //This is for replacing the cookie validation.

function togglePopup() {
  jQuery(".content").toggle();
  jQuery(".dull").css("filter", "blur(2px)") //apply blur effect when toggling popup.
}

jQuery(window).on("mouseleave", function() {
  if (jQuery('.content [class="text-wrapper"] .popup-text:visible').length == 0 && typeof popupshown == 'undefined') {
    popupshown = true
    togglePopup();
  }
})
jQuery(document).on('click', '[class="close-btn"]', function(event) {
  togglePopup();
})
.content {
  position: fixed;
  display: none;
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  width: 500px;
  height: auto;
  text-align: center;
  box-sizing: border-box;
  padding: 15px;
  z-index: 100;
  color: #fff;
}

.close-btn {
  position: absolute;
  right: 20px;
  top: 15px;
  color: white;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
}

.text-wrapper {
  margin: 20px 60px;
}

.popup-text {
  font-size: 18px;
}

.popup-text-small {
  font-size: 12px;
}

.popup-text-large {
  font-size: 48px;
  font-weight: bolder;
}

p {
  margin: 5px;
}

.box {
  border: 1px solid white;
  margin: 20px 50px;
}

.links {
  display: flex;
  justify-content: space-evenly;
  margin: 10px 50px;
}

.links a {
  border: 1px solid white;
  padding: 0 22px;
  border-radius: 20px;
  color: red;
  background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="dull">
   THIS IS HTML CONTENT.
 </div>
 <!--div containing the popup-->
   <div class="content">
     <div class="close-btn">
       ×
     </div>
     <div class="text-wrapper">
       <p class="popup-text">Here you are!</p>
       <p class="popup-text-large">$ 12</p>
       <p class="popup-text">for your limited edition</p>
       <p> with CocaCola</p>
       <div class="links">
         <a href="" target="_self">Click Here to Subscribe</a>
         <a href="" target="_self">Click here to Login</a>
       </div>
     </div>
   </div>

【讨论】：

  • 非常感谢。模糊效果确实对我有用。
猜你喜欢
  • 2014-12-26
  • 1970-01-01
  • 2011-04-25
  • 2013-07-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-07
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode