解决bootstrap中modal遇到esc键无法关闭页面
bootstrap，来自 twitter，是目前最受欢迎的前端框架。bootstrap 是基于 html、css、javascript 的，它简洁灵活，使得 web 开发更加快捷。不过在使用的过程中，我们还是会遇到各种小问题，今天我们探讨的就是个人在使用中遇到的一个小bug的修复。bootstrap为我们提供了很多方便的页面控件，modal就是其中之一。很多人在使用modal时遇到了esc键按下无法关闭的问题，即使显式传入keyboard选项也不生效。$('#editformitemmodal').modal({show:true, keyboard:true});此问题在2.1以后版本出现，要解决这个问题也很简单，modal所在div添加一个tabindex属性即可：&div class=fade modal tabindex=-1&问题很简单，修复起来也很简单，希望对大家能够有所帮助。更多网络编程信息请查看：Bootstrap 3 modal displaying remote content问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
bootstrap3 模态框点击保存后遮罩不隐藏保存时调用的ajax成功后，调用$('#addModal').modal('hide');关闭模态框，可是模态框关闭后，遮罩未隐藏，html中还有一串&div class="modal-backdrop fade in"&&/div&代码。哪位知道是哪里出了问题吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
问题解决了。因为我关闭模态框之后执行了一个刷新页面，导致模态框的功能未执行完
showMsg('保存成功', true);$('#addModal').modal('hide');$('#themegroupsindex').click();---刷新模态框所在页面段
解决方法则是，用ajax进行局部刷新，只刷新列表展示就可以啦。
另外，bootstrap3文档里也有提示
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习
牛顿的小脑
发布时间: 17:24:52
废话不说，直接上代码。可直接看效果，对着分析。。今天算是bootstrap 入门了，开心。。
突然居然很多事情就是那样，不要太多的畏惧，迈出第一步其实就成功了一半了。
&html ng-app="app"&
&script src="../lib/js/angular.js"&&/script&
&script src="../lib/js/ui-bootstrap-tpls-0.13.0 (1).js"&&/script&
rel="stylesheet"&
&div ng-controller="appController"&
&script type="text/ng-template" id="myModalContent.html"&
&h3&I'm a modal!&/h3&
&span&Message:{{message}}&/span&
&li ng-repeat="item in items"&
&a ng-click="selected.item=item"&{{ item }}&/a&
&!--&a ng-click="test(item);"&{{ item }}&/a&--&
Selected: &b&{{ selected.item }}&/b&
ng-click="ok()"&OK&/button&
ng-click="cancel()"&Cancel&/button&
ng-click="showModal()"&Open me!&/button&
&div ng-show="selected"&Selection from a modal: {{ selected }}&/div&
&div &I start to learn bootstrap css frow now on!!&/div&
&div &I start to learn bootstrap css frow now on!!&/div&
&div &I start to learn bootstrap css frow now on!!&/div&
&div &Panel heading without title&/div&
Panel content
&h1 &Panel title&/h1&
Panel content
&h1 &Panel title&/h1&
Panel content
&div &Panel footer&/div&
&!-- Default panel contents --&
&div &Panel heading&/div&
&!-- Table --&
&li &Cras justo odio&/li&
&li &Dapibus ac facilisis in&/li&
&li &Morbi leo risus&/li&
&li &Porta ac consectetur ac&/li&
&li &Vestibulum at eros&/li&
&!-- Default panel contents --&
&div &Panel heading&/div&
&!-- Table --&
&li &Cras justo odio&/li&
&li &Dapibus ac facilisis in&/li&
&li &Morbi leo risus&/li&
&li &Porta ac consectetur ac&/li&
&li &Vestibulum at eros&/li&
&!-- Default panel contents --&
&div &Panel heading&/div&
&!-- Table --&
&span &14&/span&
Cras justo odio
Cras justo odio
&Dapibus ac facilisis in&/a&
&Morbi leo risus&/a&
&Porta ac consectetur ac&/a&
&Vestibulum at eros&/a&
&button type="button"
aria-label="Left Align"&
aria-hidden="true"&&/span&
&button type="button" &
aria-hidden="true"&&/span& Star
&!-- Default panel contents --&
&div &Panel heading&/div&
&!-- Table --&
&th&#&/th&
&th&Month&/th&
&th&Savings&/th&
&th&Savings&/th&
&th&1&/th&
&td&January&/td&
&td&$100&/td&
&td&$100&/td&
&th&2&/th&
&td&January&/td&
&td&$100&/td&
&td&$100&/td&
&th&3&/th&
&td&January&/td&
&td&$100&/td&
&td&$100&/td&
&th&4&/th&
&td&January&/td&
&td&$100&/td&
&td&$100&/td&
angular.module('app', ['ui.bootstrap']).
service('DataService', ['$rootScope',
function($rootScope) {
this.data = {};
this.data.message = 'This is a message from a service';
this.data.items = ['item1', 'item2', 'item3'];
controller('myModal', ['$scope', '$modalInstance', 'DataService',
function($scope, $modalInstance, dataService) {
$scope.data = dataService.
$scope.message = dataService.data.
$scope.items = dataService.data.
$scope.selected = {
item: $scope.items[0]
$scope.test = function(item){
$scope.selected.item =
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
controller('appController', ['$scope', '$modal', '$log',
function($scope, $modal, $log) {
$scope.data = dataService.
$scope.showModal = function() {
var modalInstances = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'myModal'
modalInstances.result.then(function(selectedItem) {
$scope.selected = selectedI
},function(){
$('Modal dismissed at :'+new Date())
来源:/oxspirt/p/4536866.html