Question

我正在尝试用纯HTML5和CSS3做模态窗口。代码似乎在我的JSFiddle中运行得很好，但在WordPress中根本不起作用。

这是JSFiddle：https://jsfiddle.net/jesserogers/9so69d6x/3/

代码：

* {
  font-family: sans-serif;
}
.featureModal {
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(7, 57, 113, 0.75);
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.featureModal:target {
  opacity: 1;
  pointer-events: auto;
}
.featureModal > div {
  width: 75%;
  max-width: 960px;
  position: relative;
  margin: 10% auto;
  padding: 5px 25px;
  border-radius: 6px;
  background: #fff;
  -webkit-box-shadow: 0px 10px 25px -10px rgba(0, 0, 0, 0.36);
  -moz-box-shadow: 0px 10px 25px -10px rgba(0, 0, 0, 0.36);
  box-shadow: 0px 10px 25px -10px rgba(0, 0, 0, 0.36);
}
.closeModal {
  background: #0860b8;
  line-height: 24px;
  width: 24px;
  border-radius: 12px;
  position: absolute;
  top: 16px;
  right: 16px;
  text-align: center;
  color: white;
  text-decoration: none;
}
.closeModal:hover {
  background: #073971;
}
.blockityblock {
  float: left;
  width: 33.333%;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
.blockityblock > a {
  display: block;
  border: 2px solid #ddd;
  background: white;
  border-radius: 5px;
  padding: 35px 25px;
  box-sizing: border-box;
  color: #999;
  text-decoration: none;
}

<div class="blockityblock">
  <a href="#netboostModal">NetBoost</a>
</div>
<div class="blockityblock">
  <a href="#flowequalizerModal">Flow Equalizer</a>
</div>
<div class="blockityblock">
  <a href="#policypushModal">Policy Push</a>
</div>
<div id="netboostModal" class="featureModal">
  <div>
    <a href="#closeModal" class="closeModal" title="Close">x</a>
    <h2>NetBoost</h2>
    <p>The OneSite NetBoost feature ensures network responsiveness so applications and end users perform at peak productivity. Unlike TCP-based protocols, OneSite’s enterprise-grade, packet-level driver moves content at the highest possible speed while keeping
      latency low. Admins can specify the responsiveness threshold in milliseconds. OneSite keeps the network as snappy as you like, even when delivering large payloads over slow and poor connections.</p>
  </div>
</div>
<div id="flowequalizerModal" class="featureModal">
  <div>
    <a href="#closeModal" class="closeModal" title="Close">x</a>
    <h2>Flow Equalizer</h2>
    <p>OneSite’s Flow Equalizer technology protects the WAN by proactively leveling out traffic when multiple downloads occur at once. Other technologies create a separate network flow for each download, and the multiple flows can overload the WAN—leading
      to speed-killing throttling. OneSite “time slices” many downloads into a single network flow that never spikes or impacts the network, safely delivering content at maximum speed with no throttling.</p>
  </div>
</div>
<div id="policypushModal" class="featureModal">
  <div>
    <a href="#closeModal" class="closeModal" title="Close">x</a>
    <h2>Policy Push</h2>
    <p>OneSite’s Policy Push feature uses intelligence to deploy software instantly, instead of waiting up to an hour or more with native ConfigMgr and other solutions. This policy push mechanism delivers instructions to clients immediately, instead of waiting
      for the “polling” cycle, ensuring that all software updates happen rapidly. Simply set up your content distribution policies and let OneSite set them in motion instantly.</p>
  </div>
</div>

此代码段略显愚蠢，但：目标和模态功能完全相同。

我的主要问题是，有没有人在使用这种代码的WordPress中遇到任何问题？

Answer 1

有几个问题：

您在网页上有多个元素具有相同的ID netboostModal。

以下JavaScript click事件侦听器阻止了模式的执行：

$("area[href*=\\#],a[href*=\\#]:not([href=\\#]):not([href^='\\#tab']):not([href^='\\#quicktab']):not([href^='\\#pane'])").click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top - 0  
            },1000 ,'easeInOutSine');
            return false;
        }
    }
});

：目标伪类在WordPress中不起作用？

1 个答案: