Jesse Rogers Jesse Rogers - 5 months ago 21
CSS Question

CSS3 :target Pseudo Class Not Working in WordPress?

I'm trying to do the modal window out of pure HTML5 and CSS3. The code seems to work just fine in my JSFiddle, but isn't working at all in WordPress.

Here's the JSFiddle: https://jsfiddle.net/jesserogers/9so69d6x/3/

Code:



* {
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>





This code snippet is slightly dumbed down, but the :target and modal functionality is exactly the same.

My main question is, has anyone had any problems in WordPress with this kind of code?

Answer

A couple of issues:

  1. You have multiple elements on the page which have the same ID of netboostModal.
  2. The following JavaScript click event listener is blocking the execution of your modal:

    $("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;
            }
        }
    });