标签: bootstrap-modal

我有一个链接页面链接到我需要在Bootstrap模态DIV中打开的内部页面.问题是,在以这种方式加载内容时,似乎将最新版本的Bootstrap v3与jQuery v2.1.4结合使用是行不通的.我已经阅读了很多关于使用Bootstrap创建模态以及如何逐步淘汰远程内容的教程.但是必须离开才能使用jQuery,或者不是.

理论是,当你点击

<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>

应该读取data-load-remote的内容并将其注入到class中modal-body.

<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Event</h4>
            </div>
            <div class="modal-body">
                <p>Loading...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
    </div>
</div>

但是,当我用jQuery v2.1.4和BS v3.3 +尝试这个例子时,它所做的是打开一个带有灰色背景的模态窗口,但模态窗口的所有样式都消失了.这意味着它似乎只显示模态体div,但模态页眉div中的模态标题,漂亮的模态框架和底部按钮根本不显示.关闭该框的唯一方法是在模态框外单击.

我已经找到了关于如何以这种方式打开远程URL的示例,但它们都使用过时版本的bootstrap,而不是我正在使用的版本.请问有人可以解决这个问题吗？

Bootstrap在显示模态对话框时使用停电.我如何在整个背景上模糊效果？

我在我的项目中使用angular-ui-router和angular-bootstrap.

我想实现以下用例:

当用户单击"编辑"按钮时,UI-Router更改URL并打开模式窗口.当我通过点击浏览器的后退按钮返回时,模态窗口正在关闭.

如果用户在打开模态窗口时重新加载页面,则应用程序应在主ui-view容器中呈现模态窗口内容.

您可以在此公司上看到此用例:http://canopy.co/(尝试单击项目并重新加载页面)

问题:如何实现上述行为？

这是我的jsFiddle http://jsfiddle.net/sloot/ceWqw/3/

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('app', {
      url: '/',
      controller: 'AppCtrl',
      templateUrl: '/views/app.html'
    })
    .state('item', {
      url: '/profile',
      controller: 'ItemCtrl',
      templateUrl: '/views/item.html'
    });
})
.controller('AppCtrl', function($scope, $modal, $state){
  $scope.open = function(){

    // open modal whithout changing url
    $modal.open({
      templateUrl: '/views/item.html'
    });

    // I need to open popup via $state.go or something like this
  };
})
.controller('ItemCtrl', function(){});

我正在使用AngularUI在我的Angular 1.4应用程序中集成Bootstrap组件,例如Modals.

我在我的控制器中调用一个模态,如下所示:

var modalInstance = $modal.open({
  animation: true,
  templateUrl: '/static/templates/support-report-modal.html',
  controller: 'ModalInstanceCtrl'
});

不幸的是,当我想通过使用以下方式关闭Modal时:

modalInstance.close();

模态本身消失了,背景也逐渐消失,但它没有从DOM中删除,因此它覆盖了整个页面,使页面无响应.

当我检查时,我看到了这个:

在https://angular-ui.github.io/bootstrap/#/modal上的文档中的示例中,modal-open将从正文中删除该类,并modal-backdrop在关闭时从DOM中删除整个类.为什么模态逐渐消失,但在我的示例中没有从DOM中删除背景？

我已经检查了许多关于bootstrap Modals背景的其他问题,但我似乎无法弄清楚出了什么问题.

我在IE11和Edge的几个版本上反复体验渲染工件,以及具有不同图形卡和驱动程序的几种不同设备,以及Windows 10的不同更新状态.

屏幕截图上的蓝色箭头指向其中一些.在此屏幕截图中,工件结果形成关闭下拉列表.但它们也可能出现在图表周围.

有趣的一点:它们只出现在Bootstrap模态中.

我该如何避免它们？

工件是底层页面内容的一部分.似乎模态上的更改<div>(例如擦除的下拉列表)导致主页的部分变为在模态上呈现.

代码段:

jQuery(document).ready(function(e) {
    jQuery('#mymodal').trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select class="form-control" id="birthdayYear" name="birthdayYear"
            required="">
            <option></option>
           
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option> …

当我的模态弹出窗口打开时,它会在浏览器窗口的右侧添加一个垂直滚动条.我如何禁用此功能？我认为当模态窗口需要滚动时具有非常大的高度值时会启用此功能.我想禁用它,因为我的表格高度不超过窗口高度.

引导模式是否有onload事件？我打算在打开模态时调用一个http GET请求,用来自rest api的数据填充模态.我在模态中有一个表单,我在表单的onload事件上调用了GET函数,但它不起作用.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Agent details:</h4>
      </div>
      <div class="modal-body">

<form onload="getData()" style= "font-size: 16pt">

Bootstrap 4中的垂直中心模态对话框.

注意:添加了以下要求以明确我正在寻找一种适当的方法来垂直居中Bootstrap模式,涵盖所有可能的设备,在所有浏览器中.在我的情况下,我想要一个大型SPA在整个应用程序中重用相同的模式,所以我需要它在每种情况下工作.

这应该:

• 即使在高于设备高度的情况下,也可以在所有设备上访问模态内容
• 适用于任何设备+浏览器组合,市场份额大于 1%
• 不使用display:table-cell或类似的黑客(任何布局技术不意味着或设计用于布局)
• 靠近click或tap在其外的任何地方.modal-content(包括上方和下方).
• 尽可能限制jQuery/JavaScript的使用
• (可选)处理默认的Bootstrap示例,无需进行标记修改

您好按照此处的教程 https://getbootstrap.com/docs/5.0/components/modal/#via-javascript ，他们使用按钮来切换显示模式。如果你想用 javascript 在 Bootstrap 5 中显示模式，你基本上可以使用 var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop')); myModal.show();

我的问题是如何使用 javascript 关闭通过按钮打开的模式。基本上我怎样才能获得已经打开的模式的句柄？我意识到一旦我有了句柄我就会调用 .hide()

---编辑--- 为了弄清楚这一点。在 Bootstrap 5 中，当它不使用 javascript 打开时

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

我试图掌握该模式

我有一个导航栏的锚标签列表.我想在点击"注册"时打开一个模态.这是代码:

 <li><a href="@Url.Action("Login", "Home")">Login</a></li>
 <li><a href="#"> data-toggle="modal" data-target="modalRegister"> Register</a></li>

<div id="modalRegister" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="text-align-last: center">Register</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我通常使用一个按钮打开一个模态,但我不太确定如何使用<a></a>标签打开它,因为<a href""></a>.我怎样才能取得成果？