【发布时间】:2019-05-15 23:49:38
【问题描述】:
我下载了:
https://www.free-css.com/free-css-templates/page238/resume
在“我的项目”下有图像,当按下一个时会打开一个新窗口,但在同一侧。但是,当单击另一个图像时,将打开同一页面。我想用不同的图像做不同的页面。我已经尝试将“页面”和href“”#test01”上的“id”更改为test01。但除非我使用原始的“Animatedmodular”,否则它不起作用。
如何在同一个窗口中制作多个“弹出窗口”?
我不知道我是否做对了。我试图让脚本与图像一起工作。但是,如果您查看“现场演示”并向下滚动并按图像“几秒钟内的样机”,然后按“浮动样机”,它们都会打开同一个窗口,我希望它们被“链接”到不同的窗口。我想要第二张图片打开“”。我希望有人了解我想要做什么以及如何修复它的脚本。自 90 年代以来,我一直没有做主页。所以我很高兴我能得到所有的帮助。 :)
.animatedModal-on .close-popup-modal {
opacity: 1;
}
<!-- single work -->
<div class="col-md-4 col-sm-6 fashion logo">
<a id="demo01" href="#animatedModal" class="portfolio_item"> <img src="img/22-00.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"> <span>test.</span> <em>test </em> </div>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#demo2" class="portfolio_item"> <img src="img/19-00.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"> <span>test</em> </div>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work -->
<div class="col-md-4 col-sm-6 photography">
<a id="demo03" href="#03korsett" class="portfolio_item"> <img src="img/01-00.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"> <span>test</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!--DEMO01-->
<div id="animatedModal" class="popup-modal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div>
<div class="clearfix"></div>
<div class="modal-content">
<div class="container">
<div class="portfolio-padding">
<div class="col-md-8 col-md-offset-2">
<h2>Vtest</h2>
<div class="h-50"></div>
<p>test</p>
<br />
<br /> <img src="img/22-00.jpg" alt="" class="img-responsive" />
<br />
<br />
<p>Atest</p>
<br />
<br /> </div>
</div>
</div>
</div>
</div>
<!--DEMO02-->
<div id="demo2" class="popup-modal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-demo2" class="close-demo2 close-demo2"> <i class="ion-close-round"></i> </div>
<div class="clearfix"></div>
<div class="modal-content">
<div class="container">
<div class="portfolio-padding">
<div class="col-md-8 col-md-offset-2">
<h2>Vtest</h2>
<div class="h-50"></div>
<p>test</p>
<br />
<br /> <img src="img/22-00.jpg" alt="" class="img-responsive" />
<br />
<br />
<p>Atest</p>
<br />
<br /> </div>
</div>
</div>
</div>
</div>
【问题讨论】:
-
您好,欢迎来到 StackOverflow。请发布您迄今为止尝试过的代码。我们需要一个最小的、完整的、可验证的示例来使用
-
谢谢。我明天将发布代码。我现在不在电脑上。我应该发布完整的代码还是只发布一次带有链接和页面的代码?我还需要发布 js 文件吗?
-
我更新了帖子。
标签: javascript css popup