如何在Wordpress中制作弹出式博客内容

I want to display my reference works on index. I limited the words. My aim is this: User who wants to learn detail information about post, will click the post thumbnail and the rest of content will open with popup.

我想在索引上显示我的参考作品。我限制了这些话。我的目标是:想要了解有关帖子的详细信息的用户,将点击帖子缩略图,其余内容将打开弹出窗口。

I used w3css modal to make it. My javascript codes are:

我使用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";
}
}

But only the first post seems like that. The others have no reaction.

但只有第一篇文章就是这样。其他人没有反应。

Thanks.

I want to make all thumbnails like that

我想制作所有缩略图

I made some revision about that. I used fancybox 2 and change my code with this

我对此做了一些修改。我使用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>

Now all the thumbnails open with fancybox but this time the other thumbnails' contents are same with the first post.

现在所有的缩略图都用fancybox打开,但这次其他缩略图的内容与第一篇文章相同。

2 个解决方案

#1

I don't think create a modal element in every container is a right way to go.

我不认为在每个容器中创建一个模态元素是一种正确的方法。

Instead, I will suggest you make only one modal element, and change the content of

相反,我建议你只制作一个模态元素,并改变其内容

that modal when any image got clicked.

单击任何图像时的模态。

thus, here is a demo that I just made

因此,这是我刚刚制作的一个演示

JSbin

The step will be

这一步将是

find out all container elems

找出所有容器元素

bind those elems with click event

用click事件绑定这些元素

when user click one elem, extract the text and image src of that elem

当用户点击一个元素时,提取该元素的文本和图像src

inject into modal-body

注入模态体

removve hide class

删除隐藏类

#2

It's fine to have modals mixed in. You have to be a little picky about event handlers and which one to close, but it's not too bad.

将模态混合在一起很好。你必须对事件处理程序有点挑剔,哪一个要关闭,但它并不太糟糕。

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>

#1