标签: bootstrap-modal

如何open / enlarge使用jquery/js而不是数据属性在模态中创建图像？

每当用户将图像插入到内容编辑器中时,我需要它可以单击以使用js扩展为模式,因此我不能依赖用户输入他们不知道如何使用的数据属性.

我试过了:-

<a href="/myImage.png" id="pop">
    <img src="/myImage.png" style="width: 400px; height: 264px;">
    Click to Enlarge
</a>

jQuery :-

$("#pop").on("click", function() {
   $(this).modal();
});

我是否需要向jquery添加信息以传递图像源以显示在模态中？

谢谢!!!

当我关闭特定模式时，我看到以下错误：

当我使用react-router v5时，这种情况并没有发生，但由于其他要求，我最近更新到了v6，并且它开始发生。有趣的是，我有第二个页面调用相同的对话框，但它不会触发错误。

（请注意，这是一个开发环境，而不是生产环境。它可能不会出现在生产中，或者只是转到控制台。）

我似乎无法通过谷歌搜索找到任何东西......我得到的最接近的是对“ResizeObserver - 超出循环限制”的引用。我对此感到困惑，因为它没有出现在另一页上。更糟糕的是，该应用程序正在使用 Bootstrap v3（由于公司遗留原因，我现在没有足够的带宽来解决这个问题）。

有任何想法吗？

如果我打开一个模态对话框,通过Twitter Bootstrap,我注意到它将页面的所有html内容(即,在container)中向左推了一点,然后在关闭之后将其恢复正常.但是,这仅在浏览器宽度足够大而不能在"移动"(即最小)媒体查询上时才会发生.最新版本的FF和Chrome(未测试其他浏览器)会出现这种情况.

你可以在这里看到问题:http://jsfiddle.net/jxX6A/2/

注意:您必须增加"结果"窗口的宽度,以便切换到"med"或"large"媒体查询css.

我根据Bootstrap网站上显示的示例设置了页面的HTML:

<div class='container'>
    <div class='page-header'>
        <h4>My Heading</h4>
    </div>
    <div id='content'>
        This is some content.
    </div>
    <div class='footer'>
        <p>&copy; 2013, me</p>
    </div>
</div>

我猜这不应该发生,但我不确定我做错了什么.

编辑:这是一个已知的错误,有关更多(和最新)的信息,请参阅:https://github.com/twbs/bootstrap/issues/9855

我希望模态为屏幕宽度的80%左右.modal-lg不够大.这个:

.modal .modal-dialog {
  width: 80%;
}

不适用于Bootstrap 4.

如何设置twitter bootstrap模式更宽更高？

这里的例子(请点击:启动演示模式):

http://twitter.github.com/bootstrap/javascript.html#modals

当我打开twitter bootstrap模式对话框时,背景会导致滚动条并移动内容.

为了避免滚动条,我使用这个css:

.modal {
    overflow: hidden;
}

但我无法避免这种转变.

问候,马可

我正在使用Bootstrap版本3

它在非角度环境中非常简单.只需html和两行js代码在屏幕上显示模态确认对话框.

现在我正在开发一个AngularJS项目,我在其中使用ui-bootstrap模态确认对话框,我厌倦了创建新的控制器,即使对于"你确定要删除此记录吗？"等简单的事情.有点东西.

你如何处理这些简单的情况？我相信有些人会写一些指令来简化需求.

我要求您分享您对该主题的经验或项目.

我想我错过了什么,但无法弄清楚是什么.
基本上我正试图将一个对象传递给下面的模态,但是我没有得到传递的对象,而是获得null ...所以我认为是范围的问题,但我是Angular中的新手,需要一些帮助.

调节器

app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {

$scope.selected = null;

$scope.open = function (item) {

    $scope.selected = item;

    $log.info('Open' + $scope.selected); // get right passes object

    var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: 'musicViewModel',
        size: 'lg',
        resolve: {
            items: function () {
                return $scope.selected;
            }
        }
    });
};

$scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
};
});

视图

<div class="row" ng-controller="musicViewModel">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul> …

我知道这已被覆盖了很多次,大多数文章都引用了这段代码:AngularJS中带有自定义URL的模态窗口

但我只是不明白.我发现根本不清楚.我也发现这个jsfiddle实际上很棒,非常有帮助,除了这不添加网址并允许我使用后退按钮关闭模态.

编辑:这是我需要帮助的.

那么让我试着解释一下我想要实现的目标.我有一个表单来添加一个新项目,我有一个链接'添加新项目'.我希望当我点击"添加新项目"时,会弹出一个模式,其中包含我创建的"add-item.html"表单.这是一个新状态,因此url更改为/ add-item.我可以填写表格,然后选择保存或关闭.关闭,关闭模态:p(多奇怪).但我也可以点击返回关闭模态并返回上一页(状态). 此时我不需要Close的帮助,因为我仍然在努力实现模态的工作.

这是我的代码:

导航控制器:( 这甚至是放置模态功能的正确位置吗？)

angular.module('cbuiRouterApp')
  .controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {
    $scope.menu = [{
      'title': 'Home',
      'link': '/'
    }];

    $scope.open = function(){

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

        // I need to open popup via $state.go or something like this
        $scope.close = function(result){
          $modal.close(result);
        };
      };

    $scope.isCollapsed = true;
    $scope.isLoggedIn = Auth.isLoggedIn;
    $scope.isAdmin = Auth.isAdmin;
    $scope.getCurrentUser = Auth.getCurrentUser;

    $scope.logout = function() {
      Auth.logout();
      $location.path('/login');
    };

    $scope.isActive = …

通常我们用data-target="#myModal"它<button>来打开一个模态.现在我需要使用代码来控制何时打开模态.

如果我使用[hidden]或*ngIf显示它,我需要删除class="modal fade",否则,模态永远不会显示.像这样:

<div [hidden]="hideModal" id="myModal">

但是,在这种情况下,移除后class="modal fade",模态不会淡入并且背景中没有阴影.更糟糕的是,它将显示在屏幕底部而不是屏幕中心.

有没有办法保持class="modal fade"和使用代码打开它？

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>
  </div>
</div>