Wie kann ich Popup-Blog-Inhalt in Wordpress

Question

machen Ich möchte meine Referenz Arbeiten auf Index anzeigen. Ich beschränkte die Worte. Mein Ziel ist folgendes: Der Benutzer, der detaillierte Informationen über den Beitrag erfahren möchte, wird auf die Miniaturansicht des Beitrags klicken und der Rest des Inhalts wird mit einem Popup geöffnet.

Ich habe w3css Modal verwendet, um es zu machen. Meine JavaScript Codes sind:

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on the button, open the modal 
btn.onclick = function() { 
modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
if (event.target == modal) { 
    modal.style.display = "none"; 
} 
} 

Aber nur der erste Beitrag scheint so zu sein. Die anderen haben keine Reaktion.

Danke.

I want to make all thumbnails like that

ich eine Revision darüber gemacht. Ich benutzte fancybox 2 und meinen Code ändern, um mit dieser

<a href="#inline1" rel="gallery" class="fancybox"><?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?></a> 

<div id="inline1" style="width:400px;display: none;"> 
    <?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?><?php the_content(); ?> 

</div> 

Nun sind alle Thumbnails öffnen mit fancybox aber dieses Mal die andere Thumbnails' Inhalte mit dem ersten Beitrag gleich sind.

Answer 1

Ich glaube nicht, ein modales Element in jedem Container erstellen ist ein richtiger Weg zu gehen.

Stattdessen werde ich vorschlagen, dass Sie nur ein modal Element machen, und ändern Sie den Inhalt der

, die modal, wenn ein Bild geklickt wurde.

daher ist hier eine Demo, die ich

gerade gemacht

JSbin

Der Schritt

1. alle Behälter elems
2. binden diese elems mit click Ereignis erfahren wird
3. wenn der Benutzer auf ein Element klickt, extrahiere den Text und das Bild src dieses Elements
4. injizieren in Modal-Körper
5. removve hide Klasse

Answer 2

Es ist in Ordnung modals gemischt haben in. Sie haben ein wenig wählerisch, Event-Handler sein, und die man zu schließen, aber es ist nicht so schlimm.

var sites = document.querySelectorAll('.site'); 
 
var closes = document.querySelectorAll('.close'); 
 
var ix; 
 

 
for (ix = 0; ix < sites.length; ix++) { 
 
    sites.item(ix).addEventListener('click', showModal); 
 
} 
 

 
for (ix = 0; ix < closes.length; ix++) { 
 
    closes.item(ix).addEventListener('click', closeModal); 
 
} 
 

 
function showModal(e) { 
 
    e.stopPropagation(); 
 
    this.querySelector('.modal').style.display = "block"; 
 
} 
 

 
function closeModal(e) { 
 
    e.stopPropagation(); 
 
    try { 
 
    getParent(this, 'modal').style.display = "none"; 
 
    } catch (e) { 
 
    console.warn('Failed to find my daddy.'); 
 
    } 
 
} 
 

 
function getParent(el, cls) { 
 
    while (el.parentElement) { 
 
    el = el.parentElement; 
 
    if (el.classList.contains(cls)) return el; 
 
    } 
 
    return null; 
 
}

.site { 
 
    display: inline-block; 
 
} 
 
.thumbnail { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
} 
 
.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    padding-top: 100px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
} 
 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 50%; 
 
} 
 
.close { 
 
    color: #aaaaaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    line-height: 28px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 
.close:hover, 
 
.close:focus { 
 
    color: #000; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="site"> 
 
    <div class="thumbnail"></div> 
 
    <div class="modal"> 
 
     <div class="modal-content"> 
 
     <span class="close">×</span> First Item 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="site"> 
 
    <div class="thumbnail"></div> 
 
    <div class="modal"> 
 
     <div class="modal-content"> 
 
     <span class="close">×</span> Second Item 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>