问题标签 [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 投票
5 回答
31752 浏览

jquery - Bootstrap 3.0.0 模态事件未触发

我似乎无法使用 Bootstrap 3 让模态事件工作。我想在我的模态关闭时执行一个操作,但什么也没发生。

这是我剥离的 HTML:

和我的 JS:

我在这里放了一个 JSfiddle - http://jsfiddle.net/EcnC3/1/

我没有发现任何其他关于在 Bootstrap 3 中不起作用的模态事件的报告,所以我确定我做错了什么,但无法弄清楚。谢谢你的尽心帮助

0 投票
2 回答
842 浏览

php - 实现 twitter bootstrap 模态窗口调用 html

我需要从 .php 文件调用 twitter 模式窗口内的 html 数据。如何调用这个函数?下面的脚本在一个 php 文件中,一旦我们单击链接,我需要在模式窗口中调用它。我能够触发模态窗口但不能触发数据。

0 投票
1 回答
5795 浏览

angularjs - 如何在 AngularJS 中将对象从 ngRepeat 传递给 Modal

我正在尝试将对象从 ngRepeat 传递到模式窗口......就像这样:

在控制器中:

将插槽传递给模态而不弄乱范围并导致时髦行为的正确方法是什么?我尝试通过<button ng-click="openModal(slot)">...这种有效但奇怪的事情开始发生的插槽,这让我相信这不是正确的做法。有什么建议吗?

0 投票
1 回答
1777 浏览

jquery - Ask Toolbar preventing Bootstrap Modal to show

I am facing a bit problem with a project which uses bootstrap 2.3.2 framework. Users who has ask toolbar are unable to see bootstrap modal completely as in below given screenshot:

Ask Toolbar Bootstrap Modal

Steps to replicate the issue. Install ask toolbar for Google chrome {if not installed) or if installed and disabled, enable it. Go to Getbootstrap documentation website and click on Launch demo modal button to open the modal. The modal will display as shown in the screenshot.

Google Chrome is injecting an iframe with some css to all the pages (generally, html pages) to display the toolbar as chrome doesn't allow to show as inbuilt toolbar. We can disable the toolbar on window load event using following jquery function

However on initiation of bootstrap modal some data attributes being added by the ask toolbar extension, to the modal wrapper div which is preventing to display the modal fully.

The data attributes are as below: <div id="myModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block; top: -138px;" data-apn-tb_demo_v7-toolbar_set="top" data-apn-tb_demo_v7-toolbar_set_top="undefined" data-apn-toolbar-adjusted="-138px"> instead of <div id="myModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">

how to get rid of style top negative value and data-apn-tb_demo_v7-toolbar_set="top" data-apn-tb_demo_v7-toolbar_set_top="undefined" data-apn-toolbar-adjusted="-138px" from the modal or

Edit:

completely disable ask toolbar while accessing the website without forcing the user to disable or uninstall ask toolbar manually? Because the toolbar is creating some other problems as well. I have fixed top bar and jquery UI tooltips. Also, using window.scroll() and scrollTop() function to fix another div next to top menu bar. if ask toolbar is activated, the scroll method is fixing the div beyond to the top bar. Also, tooltips are getting 31px of top margin of ask toolbar.

EDIT: I can fix the issue by giving .modal.fade.in { top: 10% !important;} hack. But it is not the proper way to do it.

To install ASK Toolbar for chrome, go to http://apnstatic.ask.com/static/toolbar/everest/download/index.html?source=sp and click on Download Toolbar button. After downloading, you may need to run the application manually. Finally restart chrome or see for a menu link under chrome wrench (menu at right top side) to activate toolbar.

## Note: this issue existed in bootstrap ver. 2.3.2. Not tested in ver. 3.x.x ##

0 投票
1 回答
1096 浏览

jquery - 引导模式事件“显示”未在 IE 8 上触发

在我的 django 站点中,我使用引导程序的模式来显示表单。但是,该表单的一部分是日期字段,我想使用 jQuery UI 日期选择器。由于表单是动态获取的,因此我研究了在显示模式后使用引导程序的模式事件来应用功能。我这样做了:

这适用于 chrome,但不适用于 IE 8。我需要支持它,并且拥有 datepicker 至关重要。我没有看到任何错误消息,所以我认为我的代码没问题,添加一些警报消息告诉我在 IE 中事件甚至没有触发。我应该怎么办?

我正在使用引导程序 2.2

ps 我已经尝试过换地方然后做.modal().on('shown'但无济于事。该页面以标准模式呈现,并且与 IE8 兼容,我确定了这一点。我猜这是我不熟悉的 IE 的问题。

0 投票
1 回答
25410 浏览

php - Bootstrap modal not showing. Only background becomes black

I am using bootstrap modal. The triggrer is like this:

and my modal:

Problem is that only the backdrop becomes black but no modal appears.

I have included bootstrap.js and also bootstrap.min.css. I have used modals quite a times but this is a strange problem.

0 投票
2 回答
1240 浏览

javascript - Bootstrap 3 中的 bootstrap-modal.js 损坏

在我的代码中,有 2 个部分(取自示例)- Some InputSome More Input。我只在页面左侧看到带有禁用滚动条和一些按钮的“更多输入”。(看这里

在你回答之前,我已经在主要的 bootstrap-modal CSS 之前应用了补丁,并且包含了 bootstrap-modal 和 modalmanager。我试过把它放在任何地方,但它仍然显示损坏。

我的代码:

0 投票
1 回答
336 浏览

twitter-bootstrap - 远程模式适用于 Bootstrap 3.0.0rc1,但不适用于 3.0.0 final

我发现这个例子适用于 3.0.0 rc1

http://plnkr.co/edit/HWSgSw?p=preview

但是当我将其更改为指向 3.0.0 final 时,它停止工作。为什么?谢谢

0 投票
4 回答
4522 浏览

jquery - Bxslider 不适用于 Bootstrap 模态框

我正在使用带有bxslider的引导模式框。但它不起作用。我正在用 ajax 更改 bxslider 的内容。有时当我重新加载页面时它会起作用,但后来它不起作用。

这是我的html代码。

jquery代码如下

阿贾克斯代码...

请帮助我没有得到它的解决方案的人。我在谷歌上搜索并得到一个结果,它说使用宽度:960px; 我做了同样的事情,但没有工作。

你能帮助我吗。

0 投票
1 回答
34259 浏览

twitter-bootstrap - Angularjs中html5mode中的Bootstrap 3模态

html5Mode(true).

在单击第一次单击时,不会出现launch demo modalurl 更改为模态。/#myModal

再次单击时launch demo modal,出现模式。

在正常模式下($locationProvider.html5Mode(false);模式出现在第一次单击时。

如何使模态出现在第一次单击中?

标准模式代码:-

角代码: -

经检查,页面在第一次单击时刷新,launch demo modal但刷新不会通过服务器进行。Angular 做到了这一点。同样,在第二次单击时,angular 也会管理 REST 请求并显示模态。

PS:- 我想演示这个问题,但plunkr在 html5Mode 下不起作用。

据我所知,我不能向jsfiddle添加额外的 html 页面,你不能。此外我不确定它是否支持$locationProvider.html5Mode(true);模式。

我该去哪里展示错误?