Question

<div>
  <style>
    .dim {
        height:100%;
        width:100%;
        position:fixed;
        left:0;
        top:0;
        z-index:1 !important;
        background-color:black;
        filter: alpha(opacity=75);        /* internet explorer */
                -khtml-opacity: 0.75;     /* khtml, old safari */
                -moz-opacity: 0.75;       /* mozilla, netscape */
                opacity: 0.75;            /* fx, safari, opera */
    }

    .wrapper { 
    width: 100%; 
    top: 0px; 
    left: 0px; 
    position: absolute; 
    z-index: 5; 
    display: block;  
    }

    .popup { width: 400px;
    height: 200px; 
    margin: 0 auto; 
    padding: 40px; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    color: #333; 
    }
  </style>

<div class="dim"></div>
<div class="wrapper">
<div class="popup">
Subscribe box</div>
</div>
</div>

这里是我从另一个帖子实际获得的代码，它会弹出大部分内容并使屏幕变暗但它没有关闭或有一个关闭按钮所以那里有＃s一旦打开就无法关闭它。那么添加一个关闭按钮？

Answer 1

您必须执行一些JavaScript才能使其正常工作，以便代码可以检测关闭按钮上的click事件。我以前使用Colorbox来处理弹出窗口，因为它具有相当多的功能并且有很好的文档，尽管您也可以使用CSS3创建自己的并使用javascript添加或删除类。

类似的东西：

<style>
#basicElement {
    /* style here */ 
}
#basicElement.open {
  /* style here */ 
  animation: popup 25s linear;
  -moz-animation: popup 25s linear;
  -ms-animation: popup 25s linear;
  -o-animation: popup 25s linear;
  -webkit-animation: popup 25s linear;
}
#basicElement.closed { 
  /* style here */ 
  animation: popup 25s linear;
  -moz-animation: popup 25s linear;
  -ms-animation: popup 25s linear;
  -o-animation: popup 25s linear;
  -webkit-animation: popup 25s linear;
  animation-direction: reverse;
  -moz-direction: reverse;
  -ms-direction: reverse;
  -o-direction: reverse;
  -webkit-direction: reverse;
}
@-webkit-keyframes popup {
    0% {
        background-size: 100% 100%;
    }
    100% {
        background-size: 130% 130%;
        background-position: center bottom;
    }
}
</style>
<script>
$('#open').click(function (){ $(this).removeClass('closed').addClass('open'); });
$('#close').click(function (){ $(this).removeClass('open').addClass('closed'); });
</script>

如何使调光器关闭弹出

1 个答案: