标签: bootstrap-modal

我正在使用bootstrap模态.触发器是这样的:

<a id="add-feed-button"  role="button" data-toggle="modal" href="#add-feed-form" class="btn pull-right btn-success"   style="margin-left:5px; margin-top:-4px;">Add new</a>

和我的模态:

 <div id="add-feed-form" class="form-feed modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
this is modal.
</div> 

问题是只有背景变黑,但没有模态出现.

我已经包含了bootstrap.js和bootstrap.min.css.我已经使用过多次模态,但这是一个奇怪的问题.

你好Stackoverflowers;)

关于bootstrap.ui模式的这个特殊问题我有点费力:

未捕获错误:未知提供者:$ templateRequestProvider < - $ templateRequest < - $ modal

我已经尝试定义提供程序,但我无法使其正常工作.

这是我的app.js:

var app = angular.module('stelping', ['ui.bootstrap']).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'pages/home.html',
            controller: HomeCtrl,
            activetab: 'home'
        }).
        when('/notentool', {
            templateUrl: 'pages/notentool.html',
            controller: NotentoolCtrl,
            activetab: 'notentool'
        }).
        when('/lerngruppe', {
            templateUrl: 'pages/lerngruppe.html',
            controller: LerngruppenCtrl,
            activetab: 'lerngruppe'
        }).
        when('/raumreservierung', {
            templateUrl: 'pages/raumreservierung.html',
            controller: RaumreservierungCtrl,
            activetab: 'raumreservierung'
        }).
        when('a', function() {
            return {
                restrict: 'E',
                link: function(scope, elem, attrs) {
                    if(attrs.ngClick || attrs.href === '' || attrs.href === …

首先,我用这个打开我的模态:

$('#myModal').modal('show');

然后,在另一种情况下,我需要在按ESC /点击外面时这个相同的模态不会关闭,所以我使用这个:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

但是一旦我用第一种方法打开我的模态,第二种方法就不起作用了.任何提示？

如何强制backdrop值切换工作？

我正在尝试弹出一个信用卡详细信息的模式.详细信息来自AJAX请求.由于某种原因,根Vue实例正在更新,但组件实例不是.这就是我目前所拥有的 -

HTML:

<!-- View Card Details Modal -->
<!-- Modal -->
<div class="modal fade" id="ccdetails" 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">View Card Details</h4>
      </div>
      <card-details cardid="{{$cc->card_id}}" :message="getCCDetails('{{$cc->card_id}}')"></card-details>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>

Vue JS:

<script type="text/javascript">
Vue.component('card-details', {
  template: '<div class="modal-body">@{{message}}</div>',
  // data is technically a function, so Vue won't
  // complain, but …

我在主页上有一个欢迎类型bootstrap-modal,显示三个按钮,每个按钮应加载不同的页面

这是HTML的相关摘录

<div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" >
    <div class="modal-content" ;">
      <div class="modal-header">
        <h3 class="modal-title" id="ModalLabel">Welcome to Here</h3>
      </div>
      <div class="modal-body" style='height: 90.5%;'>
        <span style="display:td;text-align;center;">Blah Blah BLah</span>
      </div>
      <div class="modal-footer">
        <div class="btn-group">
          <a id='taketour' class="btn btn-default btn-lg" data-dismiss="modal" ,aria-hidden="true" href="/tour">Take a tour</a>
          <a id='register' class="btn btn-default btn-lg" data-dismiss="modal" aria-hidden="true" href="/add">Register</a>
          <a id='login' class="btn btn-default btn-lg" data-dismiss="modal" aria-hidden="true" href="/login">Login</a>
        </div>
      </div>
    </div>
  </div>
</div

在这里我的JS

$(window).load(function(){
    $('#welcomeModal').modal('show');
});

$('#welcomeModal').on('hidden.bs.modal', function (e) {
    if (e.id == …

我似乎无法通过我的bootstrap模式进行验证,我已经遇到了几个我遇到过的例子.

验证引导模式的正确方法是什么？

我的HTML:

 <div class="modal fade" id="addMyModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Stuff</h4>
            </div>
            <div class="modal-body">
                <form class="form-control" role="form" id="newModalForm">
                    <div class="form-group">
                        <label class="control-label col-md-3" for="email">A p Name:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control required error" id="pName" name="pName" placeholder="Enter a p name" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3" for="email">Action:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="action" placeholder="Enter and action">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="btnSaveIt">Save</button>
                <button type="button" …

最近我正在学习angularjs.我以前用过bootstrap.使用jquery,我可以轻松更改模态组件位置的位置,使其垂直对齐.现在有了angularjs,这似乎并不容易.这是一个ui bootstrap模式的plunker链接,有谁知道如何使它垂直对齐？

ui bootstrap模态组件

1.index.html

    <!doctype html>
    <html ng-app="ui.bootstrap.demo">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
        <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
        <script src="example.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div ng-controller="ModalDemoCtrl">
            <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">
                    This is modal body
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
                    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
                </div>
            </script>
            <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
        </div>
    </body>
</html>

2.example.js

    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {

        $scope.items = ['item1', 'item2', 'item3'];

        $scope.animationsEnabled …

我想md-datepicker在Bootstrap模式中使用Angular材质, 但是在点击模态弹出窗口隐藏的日期时.我该如何解决这个问题？

<div class="modal fade " tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Introduction video for body composition ...</h4>
         </div>
         <div class="modal-body">
            <md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker>
         </div>
      </div>
   </div>
</div>

<div class="modal fade " tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Introduction video for body composition ...</h4>
         </div>
         <div class="modal-body">
            <md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker> …

我正在开发vue2中的1 component = 1文件样式.

我有一个通过Bootstrap-Vue表组件构建的表,我正在使用提供程序向它传递一个项目.

其中一列包含每行的修改按钮.

这些按钮触发bootstrap-modal.

我正在使用V-if来初始化表及其属性.

<b-modal  v-if='toShow' id="modalallergy" @hide="resetModal">
      <h4 class="my-1 py-1" slot="modal-header">Allergie {{ modalDetails._id }}</h4>
      <b-container class="bv-example-row">
            <b-row>
                <b-col>
                  identifiant : {{modalDetails.data.content}}
                </b-col>
                <b-col>
                Catégorie : {{modalDetails.data.content}}
                </b-col>
            </b-row>
            </b-container>
    </b-modal>

    <b-modal id="modalallergy-edit" @hide="resetModal">
      <h4 class="my-1 py-1" slot="modal-header">Edition de l'allergie {{ modalDetails._id }}</h4>
      <pre>{{ modalDetails.data}}</pre>
    </b-modal>

这是我的模态,就在上面我有我的按钮:

<button class="btn btn-xs btn-success" @click.stop="details(row.item,row.index,$event.target)">
        <span class="glyphicon glyphicon-search"></span>
      </button>

和以下<script>和methods部分我有我的电话:

details (item, index, button) {
  this.modalDetails.data = item
  this.modalDetails.index = index
  this.modalDetails._id = item.content._id
  this.$root.$emit('bv::show::modal', …

我想要一个模态加载微调器,并在Bootstrap 4的模态对话框中进行测试.但是,我无法将模态水平居中在页面上.如果可能的话,我也希望模态没有边框和透明(所以看起来只有微调器悬停在页面上)

 function modal(){
       $('.modal').modal('show');
       setTimeout(function () {
       	console.log('hejsan');
       	$('.modal').modal('hide');
       }, 3000);
    }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

  
<button type="button" class="btn btn-primary" onclick="modal();">Open and close in 3 secs</button>

<div class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="width: 48px">
            <span class="fa fa-spinner fa-spin fa-3x"></span>
        </div>
    </div>
</div>
<p>I would like the <ul><li>spinner horizontally centered on page<li> the modal transparent without borders</ul></p>