如何向Bootstrap 4上的Lightbox添加关闭按钮
在Bootstrap 4的Lightbox中添加关闭按钮可以通过以下步骤实现：
- 首先，确保你已经包含了Bootstrap的CSS和JavaScript文件到你的HTML页面中。
- 在你的HTML文件中，创建一个包含图片和标题的div，用于触发Lightbox的显示。
<div class="lightbox-trigger" data-toggle="modal" data-target="#myModal">
<img src="image.jpg" alt="Image">
<h3>Image Title</h3>
</div>- 接下来，创建一个模态框（Modal）来显示Lightbox内容。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<img src="image.jpg" alt="Image">
<h3>Image Title</h3>
<p>Image description</p>
</div>
</div>
</div>
</div>- 在模态框（Modal）中添加一个关闭按钮，使用
data-dismiss="modal"属性来关闭模态框。
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>这个关闭按钮使用了Bootstrap的内置样式，×用于显示一个叉号图标。
通过以上步骤，你就成功地向Bootstrap 4的Lightbox添加了关闭按钮。用户点击关闭按钮时，模态框将会关闭。请注意，这只是一个示例，你可以根据实际需求进行修改和定制。
腾讯云相关产品中没有直接对应Bootstrap 4的Lightbox的产品，但你可以使用腾讯云的对象存储服务 COS（腾讯云对象存储），将图片资源上传至腾讯云并获取图片的访问链接，然后在HTML中使用这些链接来展示图片。你可以参考腾讯云 COS 的文档来了解更多关于如何使用 COS 存储图片资源的信息。
相关·内容
对不起，我的英语... 我想从here来这段代码，但它并没有关闭底层.href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet/5.2.0/ekko-lightbox.min.css" rel="sty
浏览 22提问于2020-04-30得票数 0
回答已采纳
2回答
我有一个带有jQuery灯箱的网页，在页面加载时自动打开。在lightbox中，我实现了Facebook Like按钮(这是电子邮件中Facebook Like按钮的2次点击解决方案)。现在，当Facebook用户通过点击Facebook上的"Liked“URL访问我的网页时，我想要关闭lightbox。我不想创建两个不同的页面(一个打开了lightbox，另一个
浏览 1提问于2012-04-20得票数 1
我的网页上有4个主要图标，当你点击其中一个时，会弹出一个灯箱。当您单击关闭时，灯箱将后退。单击第二个图标时，会出现lightbox 2，依此类推。我正在尝试做的是，当用户按下左和右按钮时，设置jQuery在4个灯箱之间切换。
要做到这一点，我需要为每个操作使用2个If语句。我需要'IF LIGHTBOX two IS OPEN ( display : BLOCK)‘，用户按下右键，关闭lightbox 2，
浏览 0提问于2013-07-19得票数 0
1回答
我正在努力弄清楚如何通过单击背景或黑暗区域来添加关闭Lightbox的功能，并在灯箱中添加一个关闭按钮来关闭它。<script>
$("#lightbox, #lightbox-panel").fadeIn(300); $("a#close-pan
浏览 1提问于2014-07-26得票数 1
我最近做了一个Lightbox，我想给它添加一个关闭按钮。style.display='none'">x</a></div> </body>如何在弹出窗口的上角<
浏览 4提问于2013-05-19得票数 1
回答已采纳
我不能让Lightbox2 ()与Django一起工作。当我点击会员的图片，我想看到灯箱出现。相反，它显示下载的映像。同样，悬停在图像上不起作用。以下是我迄今所做的工作： <a href="{{ MEDIA_URL }}
{{userprofile.profile_picture.url|default_if_none:''
浏览 4提问于2015-05-14得票数 0
2回答
我有下面的代码，用于打开覆盖div中的图像。由于某种原因，每当我试图向图像对象添加边框时，它都无法工作。它只显示没有边框的原始图像。如何在这上面实现一个边框，并在右上角设置一个关闭按钮？这是我的密码。$(document).ready(function(){
$('body').css('o
浏览 6提问于2013-11-25得票数 0
回答已采纳
我有一个相当大的表单要开发，它可能需要一些时间来渲染(超过5秒)。现在，为了给用户一个提示，我想用一个简单的“页面加载”消息来启动一个lightbox，而页面的其余部分在后台加载。页面完全加载后，我可以关闭lightbox，用户可以继续使用应用程序。现在我知道我不应该使用window.onload来激活它，因为jQuery的document.ready对这个问题来说是更快更好的解决方案，但是有没有人有任何关于如何做到这一点的建议或者如
浏览 5提问于2011-06-10得票数 1
回答已采纳
1回答
operation update_conference_settings(); });
update_conference_settings()是提交ajax表单并返回确认的函数。.welcome-lightbox-close关闭表单所在的模式。目前，.welcome-lightbox-close似乎会立即关闭
浏览 3提问于2014-01-08得票数 1
我在制作我的网站时遇到了一个问题。我使用了lightbox作为描述。问题是，在任何点击的地方，它都会关闭，这是我不想要的，因为那个灯箱包含的链接很少。
任何帮助都将不胜感激。提前谢谢你，Megha。
浏览 2提问于2011-09-14得票数 0
我在'Content/Images/Lightboxbut am not quite sure how to point jquery.lightbox-0.5.min.js to these fileswhen I hover over the broken image links it ends up being中为我的灯箱设置了加载、上一步/下一步/关闭按钮
这时，我进入lightbox脚本文件，将位置更改为相对于javascrip
浏览 0提问于2012-04-11得票数 1
回答已采纳
我使用带有seam的primefaces lightbox组件。我有一个firstpage.xhtml页面，在那里我有一个按钮，显示一个带有iframe参数的灯箱，它将显示一个具有一些表单域和一个“关闭窗口”按钮的secondpage.xhtml。firstpage.xhtml的代码
> <ui:composition xmlns="http://www.w3.org/1999/xhtml
浏览 0提问于2011-10-24得票数 0
3回答
单击提交按钮后，我想关闭灯箱并停留在该页面上。但在单击submit按钮后，它将重定向到另一个页面(PHP数据库连接页面)。
我想知道如何关闭灯箱并停留在那一页上。
浏览 1提问于2011-07-07得票数 0
回答已采纳
2回答
引导4-避免屏幕上点击模式关闭
、、、、
在rails 4中，我使用的是引导插件。当我使用模态功能，有关闭事件的问题，我需要解决。当模式打开时，当我点击'x‘图标或'Esc’按钮时，它应该关闭，否则它应该总是打开。现在，当我点击不包括模态表单区域的屏幕时，它会变得更接近。在main.erb中，
<div class="modal fade" id="main-lightbox-container" tabindex="
浏览 2提问于2016-01-18得票数 1
回答已采纳
2回答
我希望有人在灯箱上输入“解锁代码”来关闭灯箱。使用我使用的lightbox脚本，要关闭lightbox，我可以正常使用以下代码：或者添加到元素中：class = "close"
相反，我希望它在选择正确的解锁代码时关闭任何关于如何最好地做到这一点的想法。
浏览 2提问于2014-09-18得票数 0
相当复杂，但本质上很简单。在这种情况下，用户单击链接，这将打开一个模式窗口。这里面有条款和条件，不能关闭，除非用户同意我们的条款，点击提交按钮(接受).模式窗口，所有的工作都做得很好和花哨。它的提交
浏览 1提问于2010-11-17得票数 1
2回答
jQuery附加到父级
、、、
我已经将window.parent.document添加到代码中，这没有任何错误，但是关闭Div似乎仍然受到容器的限制。在这里可以找到示例(单击LIGHTBOX链接-右下角-所有样式都已删除)：帮助！:( )
浏览 4提问于2010-05-24得票数 1
回答已采纳
4回答
我有一个固定位置的DIV，名为Lightbox。我的问题是，当我滚动内容时，关闭按钮不会停留在右上角。 position: fixed; top: 50%; width: 600pxinline-block; he
浏览 8提问于2015-02-06得票数 0
回答已采纳
我希望用传递到指令中的mapId填充我的视图。那么，我想用这个观点来代替“这是一些内容”。
首先，如何将mapId传递到视图中；其次，如何在lightbox中显示该视图？我知道这是有点模糊，但我是新的角度，所以我不知道其他的信息是需要这里。
浏览 1提问于2014-02-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
