我有一个我修改过的模板,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
而且我是这个领域的新手,我正在尝试制作一个博客部分..或者如果您有一个解决方案只是在弹出窗口中扩展文本或其他内容,我将非常感激
预先感谢您的帮助
答案 0 :(得分:0)
您可以将博客的内容放在 <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>