问题标签 [bootstrap-modal]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1458 浏览

javascript - 如何在我的 ember 视图中绑定到引导程序的模式事件?

我正在使用 ember 视图来呈现我的应用程序的模式介绍,目前它看起来像这样:

意见/modal.js

控制器/application.js

modal.hbs模板只是一些样板 html。

当我触发我的showModal函数时,我可以很好地显示模态但是在模态关闭后我无法从 DOM 中删除视图,我正在尝试绑定到hidden事件但我不知道如何,可以有人指出我正确的方向吗?

0 投票
1 回答
530 浏览

twitter-bootstrap - 带有远程参数的引导模式不起作用

我有以下代码要求模态弹出窗口

在我的远程网址中,我有以下代码

这是引导文档中的默认代码。但是当我单击链接时,弹出窗口不起作用。有任何想法吗?

0 投票
2 回答
8554 浏览

twitter-bootstrap - 选择的下拉列表不适用于模态

我正在尝试让 jQuery Chosen 选择/下拉列表在 Bootbox 模式中工作。我在标准 HTML 页面上工作的代码几乎完全相同,所以我认为将我的列表弹出到模式中会很简单。我生成我的 div 并在模式中选择对象,然后在“显示”之后,我调用 Chosen:

在此之后,Chosen 似乎被打破了。选择的项目是灰色的——我不能点击它们。

在 myApp.init() 中,我填充了选择项,它可以工作。

在此处输入图像描述

在模态的幕后,我可以看到 Chosen 容器似乎已经初始化,但它没有将选择选项传输到 chzn-drop div。在图像中,chzn-results UL 应填充选项。这是模态版本:在此处输入图像描述

下面是它的样子,来自 HTML 版本: 目标

在 HTML 版本中,我的代码位于 body 标记的底部(类似地,选择选项填充在 myApp.init() 中),它似乎工作得很好。调用的顺序似乎是相同的......

这不仅仅是 z-index 的问题——我已经玩过了,但没有运气。似乎在模式内部,Chosen 插件以某种方式变得混乱并且没有绑定或更新,即使它已经正确初始化。我不知道如何解决它并且找不到其他有同样问题的人......这让我认为这可能是一个时间问题(但为什么它在 HTML 中有效?),或者我正在做一些愚蠢的事情(高度可能)。有没有人对在哪里看或有什么问题有任何建议?

谢谢!

==============================

为选择输入添加 HTML(根据 Christopher 的问题)

对于这两个版本,我使用以下代码填充选择(myApp.init() 中的编辑版本):

实际元素本身如下。在非工作模式版本中:

在工作的 HTML 版本中:

0 投票
3 回答
10275 浏览

jquery - 在 twitter 引导模式中启用锚点

我有一个完美的引导模式。

模态框的页眉/正文/页脚填充了正确的数据。在模态正文中,我有一些带有指向其他页面的链接的内容,但由于某种原因,它们被“喜欢”禁用了。

我猜引导程序应用了 event.preventDefault(); 到模态体内的所有链接,或类似的东西。

有没有办法重新启用它们?

HTML:

我的意思的一个例子http://jsfiddle.net/kulldox/ft3zX/

0 投票
3 回答
30333 浏览

php - 通过单击编辑按钮在引导模式中显示特定的行数据

我是编程新手,并试图实现引导模式以将 mysql 表中的行数据显示到模式窗口中。

我已经尝试了通过链接在stackoverflow“将信息从mysql表中提取到引导模式以进行编辑”中找到的解决方案。但无法使用 $row['SFID'] 显示特定行。

我可以提取表数据,但是当我单击任何行前面的编辑​​按钮时,它总是显示最后一行 id

并且在编辑数据的modal上的输入框中不显示数据???。

我到现在为止,请帮帮我。



谢谢你的帮助。

0 投票
1 回答
295 浏览

google-chrome - 引导模式在 Chrome 和 Opera 中有效,但未加载 html 页面

我已经查看并搜索过,但我找不到从引导程序加载模式中页面的解决方案。我使用的代码(来自引导文档)适用于 FF、IE 和 Safari,只有 Chrome 和 Opera 不想加载,我得到模态窗口,但没有页面。

我检查了 Chrome 控制台,它说:Access-Control-Allow-Origin 不允许选项文件 xxx.html Origin null 并且 XMLHttpRequest 无法加载文件 xxx.html Access-Control-Allow-Origin 不允许 Origin null。我想这对于 Opera 12 来说也是同样的问题。

Access-Control-Allow-Origin 不允许如何更改此 Origin null。我可以在 Chrome 和 Opera 上测试模态。我发现一旦站点在服务器上,就不应该再有问题了。

0 投票
1 回答
2641 浏览

javascript - Twitter 引导模式 URL 参数

有没有办法让它,如果我去例如: http://www.example.org/modal.html?openmodal=true模态将打开 onLoad 但如果我去http://www.example .org/modal.html模态不会在加载时打开?

0 投票
1 回答
1496 浏览

jquery - Bootstrap 模态插件加载不显示

我已经绞尽脑汁好几个小时了,我不明白为什么引导模式在使用它的 ajax 功能时不会从 .on 事件内部显示加载屏幕。$('body').modalmanager('loading'); 如果我把它放在 .on 事件之外就可以工作,所以我知道脚本工作正常。但是当它在 on 事件中时,就像在插件示例中一样,我什么也得不到。有什么建议么?

我正在使用以下代码绑定点击事件:

除了 bootstrap.js,我还包括了最新的 bootstrap-modal 文件,如下所示:

0 投票
2 回答
2985 浏览

twitter-bootstrap - 如何将 bootstrap-modal 插件与 AngularUI Bootstrap 集成

我正在将基于 jQuery 的 Web 应用程序迁移到 AngularJS。我无法将bootstrap-modal 插件与 AngularUI Bootstrap 集成。bootstrap-modal 插件提供了一些我需要的功能:全宽模式、响应式设计和可堆叠模式。

我已经在plunker上集成了两者进行了基本尝试。请注意,当窗口宽度较小时,模态显示为全角。但是,如果您弹出 plunker 预览窗口并将窗口宽度增加到 ~979px 以上,则模态框会下降一半页面。我可以在 bootstrap-modal 源代码中看到 CSS 将模态设置为“top:50%”,但是 JS 应该根据模态高度设置负边距顶部,因此模态在中心垂直对齐的页面。JS 没有被正确调用,因此模式向页面底部倾斜。

来自 plunker 的代码片段如下。

HTML:

JavaScript 控制器:

另一种方法似乎不使用 AngularUI Bootstrap,而只是使用 bootstrap 的常规方法在模态 HTML 中编码。我发现这个jsFiddle在仍然使用 AngularJS 的同时可以做到这一点。如果可能的话,我更喜欢使用 AngularUI 方法。

0 投票
2 回答
5067 浏览

css - Bootstrap 模态在第二次打开后不会以“x”关闭

所以我有这个问题,在我打开一个模式后,关闭它(通过单击“x”或背景覆盖)。我第二次打开模式时,它只能通过单击背景覆盖来关闭,并且通过单击“x”来关闭不起作用。

下面是我的模态代码:

哦,顺便说一句,我正在使用 Bootstrap 3。

在过去几个小时将我的头撞在墙上后,非常感谢任何帮助。