Question

https://jsfiddle.net/jh1nwgyL/1/embedded/result/

我只使用CSS3 :target制作了这个很酷的'模态'，但是当我选择一个选项时，模态将会消失并且'Criar evento'按钮将不再起作用，我想修复它，但是我很难，我尝试使用hide()和show()更改显示元素，没有任何作用！

我希望能够选择一个事件，让'模态'消失，但不会改变按钮的功能..

HTML：

<a href="#new__event" class="create__event">Criar evento</a>

<div id="new__event">
        <a href="#" class="close"></a>
        <div class="targets">
          <div class="target" data-id="free">
            <h2>Free Pass</h2>
          </div>
          <div class="target" data-id="augusta">
            <h2>Augusta</h2>
          </div>
          <div class="target" data-id="vila">
            <h2>Vila Madalena</h2>
          </div>
          <div class="target" data-id="custom">
            <h2>Personalizado</h2>
          </div>
        </div>
      </div>

CSS：

#new__event {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
#new__event:target {
  pointer-events: all;
  opacity: 1;
}
#new__event .targets {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#new__event .target  {
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 48px;
  width: 50%;
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  background: white;
  color: #f98835;
  margin-top: 0.1rem;
}

#new__event .target:hover {
  background: #f98835;
  color: white;
}
#new__event a.close {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #34495e;
  opacity: 0.5;
  transition: opacity 200ms;
}
#new__event a.close:hover {
  opacity: 0.4;
}

Jquery的：

$('.target').on('click', function () {
    var page = $(this).data('id') + '.html';

    $('#new__event').css('display', 'none');
});

谢谢！

Answer 1

您可以通过更改window.location.hash的值来更改网址哈希。

这样做时，:target伪类不活动（这使得#new__event元素可见。）

Updated Example

$('.target').on('click', function () {
     window.location.hash = null;
});

作为旁注，当您点击锚元素时，

<a href="#new__event" class="create__event">Criar evento</a>

window.location.hash值更改为new__event。

如何关闭使用＆＃34;：target＆＃34;创建的绝对定位窗口伪类？

1 个答案: