如何将整页博客添加到博客预览？

Question

我有一个我修改过的模板，并且 div 中有一个带有博客部分的部分（它是一个单页模板，我暂时还不够好，无法自己制作一个这样的页面）： blog part 无论如何，这里是测试网站（如果您更容易理解的话）：https://test555989.000webhostapp.com/index-slider.html

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