如何在博客预览中添加完整页面的博客？

Question

我有一个我修改过的模板，并且在div中有一个带有博客部分的部分(它是一个页面模板，我自己做一个页面还不够好)：blog part在任何情况下都是测试网站(如果它对你更容易理解的话)：https://test555989.000webhostapp.com/index-slider.html

这是codein html：

   <!-- Blog Start -->
    <section class="section bg-light" id="blog">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center">
                    <div class="section-title">
                        <h4 class="title text-uppercase fw-normal mb-4">Latest <span class="text-primary fw-bold">News</span> </h4>
                        <p class="text-muted mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
                    </div>
                </div><!--end col-->
            </div><!--end row-->

            <div class="row">
                <div class="col-lg-4 col-md-6 mt-4 pt-2">
                    <div class="blog-post bg-white rounded">
                        <img src="images/blog/01.jpg" class="img-fluid rounded-top" alt="">
                        <div class="blog-content p-3">
                            <h5><a href="#" class="blog-title text-dark">How To Better Understand Yourself</a></h5>
                            <p class="text-muted">Сконтактируйте с нами и получите бесплатную констультацию</p>
                            <div class="tag text-muted">
                                <a href="javascript:void(0)" class="float-end mb-0 text-muted"><i class="mdi mdi-account me-2"></i>A.Lanez</a>
                                <a href="javascript:void(0)" class="mb-0 text-muted"><i class="mdi mdi-calendar-heart me-2"></i>1st July 2019</a>
                            </div>
                        </div>
                    </div><!--end blog post-->
                </div><!--end col-->
                
                <div class="col-lg-4 col-md-6 mt-4 pt-2">
                    <div class="blog-post bg-white rounded">
                        <img src="images/blog/02.jpg" class="img-fluid rounded-top" alt="">
                        <div class="blog-content p-3">
                            <h5><a href="#" class="blog-title text-dark">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</a></h5>
                            <p class="text-muted">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velits</p>
                            <div class="tag text-muted">
                                <a href="javascript:void(0)" class="float-end mb-0 text-muted"><i class="mdi mdi-account me-2"></i>A.Lanez</a>
                                <a href="javascript:void(0)" class="mb-0 text-muted"><i class="mdi mdi-calendar-heart me-2"></i>1st July 2019</a>
                            </div>
                        </div>
                    </div><!--end blog post-->
                </div><!--end col-->
                
                <div class="col-lg-4 col-md-6 mt-4 pt-2">
                    <div class="blog-post bg-white rounded">
                        <img src="images/blog/03.jpg" class="img-fluid rounded-top" alt="">
                        <div class="blog-content p-3">
                            <h5><a href="#" class="blog-title text-dark">Be One With Nature | Zero-wast Life</a></h5>
                            <p class="text-muted">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velits</p>
                            <div class="tag text-muted">
                                <a href="javascript:void(0)" class="float-end mb-0 text-muted"><i class="mdi mdi-account me-2"></i>A.Lanez</a>
                                <a href="javascript:void(0)" class="mb-0 text-muted"><i class="mdi mdi-calendar-heart me-2"></i>1st July 2019</a>
                            </div>
                        </div>
                    </div><!--end blog post-->
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end container-->
    </section><!--end section-->
    <!-- Blog End -->

我不知道怎么做，例如当你点击它的时候，打开一个带有完整文本和相同图片的弹出页面，你可以向下滚动看到博客的所有文本，而不是预览！这里有所有的文件：files

我在这个领域还是个新手，我只是想做一个博客..或者，如果您有一个解决方案，只是在弹出窗口中扩展文本或其他东西，我将不胜感激

预先感谢您的帮助

Answer 1

您可以将博客内容放在<iframe>中，并使博客预览更改src，并在单击时显示<iframe>。这是一个带有一个按钮的示例，该按钮可以召唤一个带有随机StackOverflow图像的iframe。*您也可以在窗口外单击以将其隐藏。

我不能完全确定为什么iframe没有居中--以前我在学校的项目中使用它时，它工作得很好。

​

function hideBlogWindow(){
  document.getElementById("blog-window").hidden = true;
}

function showBlogWindow(src){
  document.getElementById("blog-window-iframe").src = src;
  document.getElementById("blog-window").hidden = false;
}

overlay {

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    
    /* This determines the darkening effect around the window */
    background-color: #00000067; 
    
}

overlay > iframe {

    /* Make the iframe 60% the width of the page*/
    width: 60vw;
    /* Make the iframe 50% the height of the page*/
    height: 50vh;
    
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
}

<button onclick="showBlogWindow('https://i.stack.imgur.com/37IJK.png')">
  Show Blog Window
</button>

<overlay id="blog-window" hidden="true" onclick="hideBlogWindow()">
    <iframe id="blog-window-iframe"></iframe>
</overlay>

​