gpt4 book ai didi

javascript - 图像打开模态对话框 Bootstrap

转载 作者:太空宇宙 更新时间:2023-11-04 12:38:56 25 4
gpt4 key购买 nike

太棒了,我想使用我拥有的这些图片,这样当它们被点击时,它会为我网站上的员工页面打开一个模式对话框,我不知道该怎么做

PS:我在这里看到过类似的东西,但这不是我想要的

<img src="https://minotar.net/helm/EpicMinerBackup">
<img src="https://minotar.net/helm/kingpooper27s">

编辑~~~:解决问题~~~编辑结束~~

<!--####################### Start of the staff list ############################### -->
<img src="https://minotar.net/helm/EpicMinerBackup" data-toggle="modal" data-target="#Staff1" />

<div class="modal fade" id="Staff1" tabindex="-1" role="dialog" aria-labelledby="StaffModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="StaffModalLabel1">EpicMinerBackup</h4>
</div>
<div class="modal-body">
The Owner of the site and server.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--########################################################################## -->

最佳答案

您可以使用数据属性来加载模态框。 img href 值应匹配以# 为前缀的模态 ID 值。如果低于其#myModal。如果它仍然不起作用,请检查 JS 错误或是否加载了 Bootstrap js 文件。

<img href="#myModal" data-toggle="modal" src="https://minotar.net/helm/EpicMinerBackup">
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

这是示例链接 http://www.bootply.com/TH49jSYRm6

关于javascript - 图像打开模态对话框 Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27048073/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com