如何在Wordpress中製作彈出式博客內容

Question

我想在索引中顯示我的參考作品。我限制的話。我的目標是：想要了解關於帖子的詳細信息的用戶，將點擊帖子縮略圖，其餘內容將會彈出。

我用w3css模式來製作它。我的javascript代碼是：

// 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"; 
} 
} 

但只有第一篇文章似乎是這樣的。其他人沒有反應。

謝謝。

I want to make all thumbnails like that

我做了一些修改有關。我用的fancybox 2和更改代碼才能使用此

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

現在所有的縮略圖用的fancybox但此時其他縮略圖內容是相同的先上後打開。

Answer 1

我不認爲在每個容器中創建一個模態元素是一條正確的路。

相反，我會建議你做只有一個模態元素，改變

得到任何點擊圖像時情態的內容。

因此，這裏是我剛剛做了一個演示

JSbin

的步驟將是

1. 找出所有容器elems的
2. 綁定那些elems的與click事件
3. 當用戶點擊一個元素時，提取該元素的文本和圖像src
4. 注入模體
5. removve hide類

Answer 2

它的優良有模態混合。你必須要有點挑剔的事件處理程序和一個關閉，但它不是太糟糕了。

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>