标签: bootstrap-modal

我想验证我的第一个字段的形式createViewModal,datepickerCreateModal在dd.mm.yyyy格式.我正在寻找一些正则表达式,我发现它:

/(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[012])\.(19|20)\d\d/

但看起来这个regEX并不是很好 - 它从一年开始只拉两位数("20"而不是"2016")

dd.mm.yyyy(11.05.2016)你能给我写一个完整的正则表达式吗？我想我将能够通过bootstrap验证器使用此正则表达式创建回调函数.

如果有人已经有这个正则表达式或类似的解决方案,我会很高兴听到它!

<div class="modal fade" id="createViewModal" 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">
        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">New SAR</h4>
      </div>
      <div class="modal-body">
        <div id="formregister">
          <form action="" class="form-horizontal" role="form" id="createViewModal">
            <p class="qc-errmsg" style="display: none;">&nbsp;</p>
            <div class="form-group">
              <label for="Date" class="col-sm-2 control-label">Date</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="datepickerCreateModal" name="Date" placeholder="Date">
              </div>
            </div>
            <div class="form-group">
              <label for="Client" …

<div class="input-group Flugo_group">
     <h4 class="text-center">or</h4>
</div>

我试图在中心显示但不工作.第二次使用位置相对但在响应式设计中不能正常工作.

在Vue(2)中有没有一个像样的方法来处理Bootstrap(3)模态隐藏事件？

我发现这是一种JQuery方式,但我无法弄清楚如何在Vue中捕获此事件:

$('#myModal').on('hidden.bs.modal', function () {
  // do something…
})

添加类似的东西v-on:hide.bs.modal="alert('hide')似乎不起作用.

这是我在 HTML 页面中使用的代码。在我的角度模块中，我导入所有相关的东西。但总是说这个错误是因为背景。请帮忙。我不知道这个背景。如果有人可以解释一下这个错误是什么以及为什么会出现？

<div class="animated fadeIn">
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-header">
              <i class="fa fa-align-justify"></i> Bootstrap Modals
            </div>
            <div class="card-block">
              <!-- Button trigger modal -->
              <button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()">
        Launch small modal
      </button>
            </div>
          </div>
        </div>
        <!--/.col-->
      </div>
      <!--/.row-->
    </div>

    <div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Modal title</h4>
            <button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div …

我有一个带有下拉菜单的标题。如果我点击，我会看到菜单。一切工作都很完美。这是 HTML：

我从引导程序导入模式的另一个页面，当我单击下拉菜单时没有任何反应。在控制台中它没有显示任何错误，但我不知道为什么，我有两个事件：

如果我从 Js 中删除导入。文件，它将完美地工作：

import { Modal } from 'bootstrap';

应用程序.js

const bootstrap = require('bootstrap/dist/js/bootstrap.bundle');

联系.js

import { Modal } from 'bootstrap';


window.addEventListener("DOMContentLoaded", () => {
if (document.getElementById('emailHasBeenSent') !== null && document.getElementById('emailHasBeenSent').value) {
    const modal = new Modal(document.getElementById('contactUsModal')),
        closeModalBtn = document.querySelector('.contact--modal-close-btn');

    modal.show();

    closeModalBtn.addEventListener('click', e => {
        modal.hide();
    })
}});

Bootstrap 的模态似乎“取消”onClick 事件下拉列表。类名保留在“btn dropdown-toggle”上，而不是“btn dropdown-toggle show ”上。你能帮我看看问题出在哪里吗？

我试图做一个angularjs模态服务.我有一个控制器,打开一些模态,在该模态我称为原始控制器功能或访问一些变量,这部分我可以做到这一点.我只是无法关闭模态而不点击取消或确定按钮,o想要在模态中进行一些操作,手动调用一些werbservices和关闭模式.谁能帮我？

我在这里做了一个工作的plunker: plunker

var modalInstance = $modal.open({
              templateUrl: 'myModalContent2.html',
              controller: ModalInstanceCtrl,
              size: size,
              scope: $scope

            });

我试图打开一个模式对话框采用了棱角分明的UI路由器作为解释在这里.

目标是可以在任何地方访问对话框,不一定需要URL,但如果我可以链接到打开对话框的页面,那将是很好的.

这是破碎的样本:

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

单击"菜单"应从任一页面打开对话框.

路由逻辑:

app.config(function($stateProvider,$locationProvider, $urlRouterProvider, modalStateProvider) {
  $urlRouterProvider.otherwise("/");
  $locationProvider.html5Mode(true);

  $stateProvider
    .state("app", {
      url: "",
      abstarct: true,
      views: {
        "" : {
          templateUrl: "main.html",
        },
        "header@app": {
          templateUrl: "header.html"
        },
        "footer@app":{
          templateUrl: "footer.html"
        }
      }
    })

    .state("app.home", {
      url: "/",
      templateUrl: "home.html",
    })
    .state("app.content", {
      url: "/content",
      templateUrl: "content1.html",
    });


  modalStateProvider.state("app.home.menu", {
    template: "I am a Dialog!",
    controller: function ($scope) {
      $scope.dismiss = function () {
        $scope.$dismiss();
      };
    }
  });
});

它不应该是"app.home"的孩子,因为我希望它可以从任何地方访问.我怎样才能做到这一点？

我有一个使用PHP循环在我的页面上回显的用户列表.当我单击每个用户的名称时,会弹出Bootsrap Modal并显示用户的更多详细信息.链接看起来像这样.

<a href="#user"  data-toggle="modal"  data-id="{$user['id']}">UserName</a>

如您所见,我将用户的ID传递给Bootstrap模式,以便我可以通过调用get_user_by_id()Bootstrap模式来使用它来检索用户的其他信息.

莫代尔看起来像这样

<div class="modal fade" id="user">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <?php
          $user = get_user_by_id($id);
         ?>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JS代码是这样的

$('#user').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget)
   var id = button.data('id')
})

根据上面的JS代码,我的用户ID在var id变量中.但是,我无法想象如何将上述PHP函数的值用作参数.

那有什么办法吗？

我编辑的问题是关于AJAX方法更加独特,大多数答案都基于AJAX

PS:我是PHP和Bootstrap的新手.

我链接到一个bootstrap模式,如下所示; 然而,在一轮打开/关闭后,模态停止响应点击.我试图用bootstrap文档中的示例替换代码,它可以工作.我不确定从哪里开始调试.

<div class="modal fade" id="campaign-slider-content" tabindex="-1"  aria-hidden="true" data-backdrop="true">
    <div class="modal-dialog modal-lg" style="overflow-y: scroll; max-height:100%;"> 
        <div class="modal-content">
            <div class="modal-header"> 
            </div> 
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

<%= link_to image_tag(campaign.featured_image.url(:crowdreview_cropped), width: '288') 
campaign_slider_detail_path(campaign.id), data: { toggle: 'modal', target: '#campaign-slider-content'}%>

我需要使用一个带有角度4和bootstrap 4的表,但是bootstrap 4官方表看起来并不太好.我找到了这个git项目:https: //www.npmjs.com/package/angular-4-data-table-fix

但无法找到有关如何使用它的任何文档.有谁知道这个项目或类似的项目,可以帮助吗？

谢谢.