Question

我创建了它并且可以正常运行，但是它只能运行一次，这意味着单击“订阅贸易警报”链接将打开一个div框，并说“订阅”并带有一个x标记以关闭该div，但是在关闭后如果我再次通过单击相同的链接来打开div，则它第二次不起作用。我希望它无限运行。

此处是代码：

.trade-alert
{
    width: 180px;
    height: 26px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    color: #333;
}

.subscription-trade-alert-box
{
    width: 423px;
    height: 177px;
    border: 1px solid #DAE2ED;
    box-shadow: 2px 2px 5px rgba(83,100,122,.35);
    background-color: #fff;
    overflow: hidden;
    display: none;
    position: relative;
    left: 200px;
}

.close
{
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    transform: translate(0%, -50%);
    color: #333;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

.scc-trade-alert-tips
{
    width: 180px;
    height: 16px;
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 16px;
    padding: 5px 5px 5px 25px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    color: #1686CC;
    cursor: pointer;
    vertical-align: baseline;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.tips-icon-mail
{
    width: 16px;
    height: 16px;
    position: absolute;
    left: 5px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: url(images/mail-ta.png) no-repeat 0 -25px;
    font-family: 'Roboto', sans-serif;
}

.trade-alert-focus-anchor:focus .subscription-trade-alert-box
{
    display: block;
    
    
}

<a class="trade-alert-focus-anchor" href="#">
      <div class="trade-alert">
        <div class="scc-trade-alert-tips">
          <i class="tips-icon-mail" ></i>
          Subscribe to Trade Alert
        </div>
      </div>
                                            
      <div class="subscription-trade-alert-box">
        <span class="close">&times;</span>
        Subscribe
      </div>
      
      <script>
        var closebtns = document.getElementsByClassName("close");
        var i;
                                                
        for (i = 0; i < closebtns.length; i++) {
        closebtns[i].addEventListener("click", function() {
        this.parentElement.style.display = 'none';
        });
        }
      </script>
</a>

如何使此无限打开和关闭。

Answer 1

我修复了它可以多次打开而不改变太多的问题：首先，我将Box subscription-trade-alert-box更改为ID而不是类。 2我修复了CSS中从Class到ID的更改第三，我为订阅链接添加了onclick事件 4th添加了一条JS行，该行在单击时设置了Subsubcribtion框样式：

        var closebtns = document.getElementsByClassName("close");
        var i;
                                                
        for (i = 0; i < closebtns.length; i++) {
        closebtns[i].addEventListener("click", function() {
        this.parentElement.style.display = 'none';
        });
        }

function showBox() {
    document.getElementById("subscription-trade-alert-box").style.display = "block";
}

.trade-alert
{
    width: 180px;
    height: 26px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    color: #333;
}

#subscription-trade-alert-box
{
    width: 423px;
    height: 177px;
    border: 1px solid #DAE2ED;
    box-shadow: 2px 2px 5px rgba(83,100,122,.35);
    background-color: #fff;
    overflow: hidden;
    display: none;
    position: relative;
    left: 200px;
}

.close
{
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    transform: translate(0%, -50%);
    color: #333;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

.scc-trade-alert-tips
{
    width: 180px;
    height: 16px;
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 16px;
    padding: 5px 5px 5px 25px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    color: #1686CC;
    cursor: pointer;
    vertical-align: baseline;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.tips-icon-mail
{
    width: 16px;
    height: 16px;
    position: absolute;
    left: 5px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: url(images/mail-ta.png) no-repeat 0 -25px;
    font-family: 'Roboto', sans-serif;
}

.trade-alert-focus-anchor:focus #subscription-trade-alert-box
{
    display: block;
    
    
}

<a class="trade-alert-focus-anchor" href="#">
  <div class="trade-alert">
    <div class="scc-trade-alert-tips" onclick="showBox()">
      <i class="tips-icon-mail" ></i>
      Subscribe to Trade Alert
    </div>
  </div>
                                            
  <div id="subscription-trade-alert-box">
    <span class="close">&times;</span>
    Subscribe
  </div>
</a>

Answer 2

在javascript中使用onclick事件，而不是在CSS中使用：focus。

  <div class="trade-alert">
    <div class="scc-trade-alert-tips" onclick="document.getElementById('subscription-trade-popup').style = 'display: block;'">
      <i class="tips-icon-mail"></i>
      Subscribe to Trade Alert
    </div>
  </div>
                                        
  <div class="subscription-trade-alert-box" id="subscription-trade-popup">
    <span class="close">&times;</span>
    Subscribe
  </div>

Answer 3

通过在元素级别设置.style = 'none'，它可以推翻CSS级别规则。相反，您可以删除css规则，只需添加另一个事件侦听器即可在block和none之间切换样式。

此外，我建议使用document.querySelector()和document.querySelectorAll()，因为它们是选择元素的现代标准。

.trade-alert
{
    width: 180px;
    height: 26px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    color: #333;
}

.subscription-trade-alert-box
{
    width: 423px;
    height: 177px;
    border: 1px solid #DAE2ED;
    box-shadow: 2px 2px 5px rgba(83,100,122,.35);
    background-color: #fff;
    overflow: hidden;
    display: none;
    position: relative;
    left: 200px;
}

.close
{
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    transform: translate(0%, -50%);
    color: #333;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

.scc-trade-alert-tips
{
    width: 180px;
    height: 16px;
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 16px;
    padding: 5px 5px 5px 25px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    color: #1686CC;
    cursor: pointer;
    vertical-align: baseline;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.tips-icon-mail
{
    width: 16px;
    height: 16px;
    position: absolute;
    left: 5px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: url(images/mail-ta.png) no-repeat 0 -25px;
    font-family: 'Roboto', sans-serif;
}
/* remove this
.trade-alert-focus-anchor:focus .subscription-trade-alert-box
{
    display: block;
    
    
}
*/

<a class="trade-alert-focus-anchor" href="#">
      <div class="trade-alert">
        <div class="scc-trade-alert-tips">
          <i class="tips-icon-mail" ></i>
          Subscribe to Trade Alert
        </div>
      </div>
                                            
      <div class="subscription-trade-alert-box">
        <span class="close">&times;</span>
        Subscribe
      </div>          
</a>

<script>
  document.querySelectorAll('.close').forEach(function(close) {
    close.addEventListener('click', function(e) {
      e.stopPropagation(); //otherwise the click will bubble and reopen itself
      this.parentElement.style.display = 'none';
    });
  });

  document.querySelector('.trade-alert-focus-anchor')
   .addEventListener('click', function() {
     document.querySelector('.subscription-trade-alert-box')
       .style.display = 'block';
  });
</script>

Answer 4

JavaScript将样式添加为嵌入式CSS。因此，如果您使用JS添加样式，请同时使用JS删除样式。该行将display: none;作为内联样式添加

this.parentElement.style.display = 'none';

我通过指定display: block进行显示和display:none;进行隐藏，制作了一个使用JS打开和关闭弹出窗口/模式的Codepen。

Codepen Link

通过单击链接打开和关闭div并通过X按钮关闭

4 个答案: