使用bootstrap添加了可点击的弹出窗口，但每个弹出窗口都是相同的
使用Bootstrap添加可点击的弹出窗口时，每个弹出窗口都是相同的是因为没有为每个弹出窗口设置唯一的标识符或目标。为了解决这个问题，可以通过为每个弹出窗口设置不同的标识符或目标来确保它们是唯一的。
在Bootstrap中，可以使用以下步骤来实现这一点：
- 为每个弹出窗口添加唯一的标识符或目标。可以使用HTML的id属性来为每个弹出窗口设置唯一的标识符。例如：
<button type="button" data-toggle="modal" data-target="#myModal1">弹出窗口1</button>
<button type="button" data-toggle="modal" data-target="#myModal2">弹出窗口2</button>- 创建每个弹出窗口的内容。可以使用Bootstrap的模态框（Modal）组件来创建弹出窗口的内容。例如：
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel1">弹出窗口1</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
弹出窗口1的内容...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel2">弹出窗口2</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
弹出窗口2的内容...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>- 确保每个弹出窗口的标识符或目标与按钮的data-target属性相对应。这样点击按钮时，对应的弹出窗口就会显示出来。
通过以上步骤，每个弹出窗口都会有唯一的标识符或目标，从而解决了每个弹出窗口都相同的问题。
关于Bootstrap的更多信息和使用方法，可以参考腾讯云的Bootstrap产品介绍页面：Bootstrap产品介绍
相关·内容
我在一个索引页面上的数据库中循环，以显示某人上传的所有图片。从那时起，我想如果你点击任何你喜欢的东西，它就会变成厨师，它会弹出更大的图标，让你更仔细地看。我在bootstrap中找到了这样做的代码。唯一的问题是-每张图片都是不同的，但当我点击它们时，它们都会弹出相同的图片。我试着把puts语句放在代码流中，它肯
浏览 14提问于2019-07-16得票数 1
回答已采纳
2回答
因此，我现在已经添加了一个弹出窗口到一个小叶多边形，并添加了显示和隐藏onClick。现在我需要的是，当点击弹出窗口显示时，我希望弹出窗口是可拖动的，即使是从传单图层。解决方案不是必须完全在leaflet上，我只是在点击图层时创建一个可拖动的弹出窗口，我已经尝试添加jQuery ui-drag
浏览 39提问于2019-09-23得票数 1
3回答
保持关闭模式或弹出型按钮的焦点
、、、、
我有一个关于可访问性的问题。有几个层/模态或弹出窗口，单击按钮或链接即可打开。我使用的是通过angular状态提供程序配置打开的a
浏览 3提问于2017-04-26得票数 2
我已经在弹出的bootstrap 2.3.2中添加了Skype按钮。当我点击通话或聊天，然后关闭弹出窗口时，Skype每次打开模式弹出窗口时都会要求连接。
浏览 0提问于2013-09-01得票数 0
UI是使用Angular JS构建的。
有没有什么好的插件/库/其他工具可以方便地将教程信息添加到web应用程序？具体地说，我正在寻找能够添加一个模式“帮助弹出”到每个页面，将出现在他们第一次进入一个页面。它应该有一个“不再显示”复选框。我也对其他想法持开放态度。我尝试过Googling，但是每一个Angular App & Demo组合都会返回使用Angular JS本身的提示。我知道，浏览我的应用程序，添加模式对话框，并
浏览 0提问于2016-02-07得票数 0
浏览器中的阻塞阻止程序在什么情况下激活，在什么情况下不激活？
您是否可以在链接上使用onclick事件来触发弹出窗口(除了target = _blank)，或者这是否总是会触发拦截器？
浏览 2提问于2012-08-24得票数 5
3回答
自动隐藏引导弹出窗口
、、、
我想在几秒钟后自动隐藏Bootstrap弹出窗口。当用户将鼠标悬停在控件上时，必须显示弹出窗口，但如果用户没有移动鼠标指针，此弹出窗口必须在几秒钟后自动隐藏。这一点很重要，因为在移动电话或平板电脑中，当用户点击控件时，会显示弹出窗口，当用户键入内容时，焦点仍然停留在相同的控件上，而弹出窗口会阻碍它。
浏览 3提问于2013-01-26得票数 18
回答已采纳
2回答
基本上，当我在弹出窗口外单击时，我希望它隐藏它。要删除弹出窗口，必须单击div才能将其删除。length == 0) || $(e.target).is('.close')) { }但是它不起作用..我当前的弹出窗口如下所示
浏览 0提问于2014-07-23得票数 0
我在我的项目中使用bootstrap popover。我打开其他弹出窗口，因为我想比较值，但所有弹出窗口都覆盖在其他弹出窗口上。我添加了图片来显示问题。我想设置动态弹出位置，但我没有这样做。
[
浏览 0提问于2018-10-27得票数 0
我正在浏览Twitter Bootstrap文档，我对实现单击按钮时可忽略的弹出窗口很感兴趣。下面是来自bootstrap文档的示例：
为什么此按钮在iOS Saf
浏览 1提问于2015-06-05得票数 2
我在AngularJS & Bootstrap中创建了一个弹出式窗口。当我单击图像时，我显示弹出窗口，但具有相同的图像和相同的多边形。我想用它自己的多边形来显示每个图像。我有这个HTML代码：
浏览 0提问于2018-03-27得票数 0
1回答
我想创建一个Bootstrap弹出窗口，它遵循一个可拖动的图像(使用jQuery UI可拖动库)。通过“跟随”，我的意思是，如果图像向右拖动10个像素，弹出窗口也会向右移动10个像素。我遇到的问题是，我不确定如何将Bootstrap弹出窗口链接到图像。popover intializer上的'container‘参数似
浏览 0提问于2013-05-21得票数 2
回答已采纳
我有一个可忽略的弹出窗口(data-trigger=“focus”)，里面有一个文本框。但只要我在文本框中输入它，它就会消失，因为“data-trigger=”焦点“。这是我的html：
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ><
浏览 1提问于2014-12-25得票数 11
我有一个简单的Flex (Flash Builder)应用程序，当用户点击地图时会弹出一个新窗口。用户可以在地图上进行后续点击以使附加的弹出窗口出现，每个弹出窗口当前弹出在初始/先前弹出窗口的顶部(即，在相同的X和Y位置)。我想修改应用程序的方式，使每个</
浏览 5提问于2010-12-03得票数 0
我正在尝试用JAVA编写一些函数，这些函数可以将pin写入SSL安全弹出窗口，用于我的自动化测试。不幸的是，我仍然找不到解决方案。这是一种Selenium看不到的元素。有谁能帮帮我吗？ ?
浏览 5提问于2021-04-11得票数 1
我有一个可点击的美国jquery地图，当您单击某个州时，它将打开该状态的链接列表。我正在使用美国地图插件()。我无法理解的奇怪之处在于，当我单击California时，我编写的与插件一起使用的jquery可以正常工作，但当您单击其他状态时，它就不能工作了。我会提供我的网站的网址，如果你想自己看看它应该做什么。首先单击加利福尼亚，然后在拐角处关闭模式窗口，然后尝试另一个州，您将看到关
浏览 4提问于2013-11-11得票数 0
回答已采纳
1回答
当我刷新超过100KB的本地SharedObject时，出现，询问用户是否允许将信息存储到他们的计算机上。如何检测弹出窗口何时出现、何时消失以及用户单击了哪个按钮？我看到其他一些Flash游戏有它自己的内部信息框，每当弹出窗口出现时就会出现，当它消失时就会消失。我怎样才能做类似的事情？
浏览 16提问于2019-11-05得票数 0
回答已采纳
1回答
因此，在我们的应用程序中，页面上会出现多个弹出式窗口，而在任何给定时间，我们只向用户显示一个弹出式窗口。我们显示弹出窗口的方式是使用jquery的show函数和设置为slide的动画。现在，我想编写自动化的单元测试来检查我的弹出窗口，并说每个弹出窗口都有一组类似的元素，比如O
浏览 1提问于2011-02-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
