标签: bootstrap-modal

当我单击 CreateTemplate-Button 时，对话框显示没有背景但标题没有改变，为什么？

即使我删除了标题类的 h4 标签，也没有设置标题。

  $('#CreateTemplate').click(function (e) {
            e.preventDefault();
            $('#myModal').modal({ backdrop: false, title: "Hello World" });
        });

<button type="button" class="btn btn-default" id="CreateTemplate"><i class="fa fa-plus"></i></button>


   <!-- Modal -->
    <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">Thats the title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <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><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

我有以下模式：

<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">
        <h4 id="mt" class="modal-title" id="myModalLabel"></h4>
        </div>
        <div id="mb" class="modal-body">
        </div>
        <div id="mf" class="modal-footer">
        </div>
    </div>
</div>

我在表中有一个按钮，它启动 jquery ajax 调用并拉入模态的标题、正文和页脚。您可以在下面看到该脚本。

<script>
$(document).ready(function(){

$('a.btn').click(function(){
    var org_id = $(this).attr('org_id');
    $.ajax({
        type: 'post',
        url: '/groups/' + org_id + '/leave',
        success: function(data){       
            var data = $('<div>').html(data);
            var msg1 = data.find('#msg1');
            var msg2 = data.find('#msg2');
            var msg3 = data.find('#msg3');
            $('#mf').html(msg3);
            $('#mt').html(msg2);
            $('#mb').html(msg1);
        }
    });
});

$('#killgroup').click(function(){
    alert('made it');
    });
});
</script> …

通过单击按钮它加载了一个bootstrap模式.在模态上有一个表单和单击保存按钮我试图通过ajax调用提交表单.第一次ajax调用触发一次,但第二次ajax url触发两次.我在firebug控制台部分看到post url被多次调用.

这是我的jquery代码.

 $(".show-modal").click(function() {
                    $('.upload-modal').modal();

                    $(".save-logo").click(function(e) {

                        e.preventDefault();
                        $.ajax({
                              type : "POST",
                              data : data,                        
                              contentType: false,
                              cache : false,
                              processData: false, 
                              url : "../../io/upload/"
                        }).done(function(rawData) {
                            $('.modal-header .close').click();

                         })

                    });
             })

我有一个示例ui-bootstrap模式(来自ui-bootstrap文档)

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

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

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

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

});

// Please note that $modalInstance represents …

这是在调整 JQuery 后工作的：

$(.modalLink").click(function () {
     var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid").val(passedID);
});

//查看链接

<a href="/Home/Employee/id=@item.Id" data-id="@item.Id" data-toggle="modal" data-target="#myModal">Load me</a> 

<a href单击时如何捕获我正在传递的 ID ？

所以我有一个模态弹出窗口，当用户单击时，我想在用户发布数据时获取它的 id。

看法：

@using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{

    <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">Record</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="FirstName" class="control-label">First Name:</label>
                        @Html.Editor("FirstName", new { htmlAttributes = new { @class = "form-control" } }) 
                    </div>
                    <div class="form-group"> …

我需要帮助我无法弄清楚为什么我的模态登录表单不符合任何更改并且看起来不像标准的bootstrap表单.

nav.php

<!-- Modal HTML -->
     <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">Login</h4>
                 </div>
                <div class="modal-body">
                    <p>Please log in below</p>
                    <form action="#" method="post" accept-charset="UTF-8">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <label class="label" for="user" style="color: black">Username</label></br>
                            <input id="user" type="text" name="user" size="30" class="input-large" placeholder="username" required/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <label class="label" for="pass"style="color: black">Password</label></br>
                            <input id="pass" type="text" name="pass" size="30" class="input-large" placeholder="Password"required/>
                        </div>
                    </div>
                    <label class="string optional" for="user_remember_me"> Remember me</label> …

我正在使用jquery.validate v1.14.0JörnZaefferer

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

我有一个项目,所有验证工作正常.如果未填充必填字段,则客户端验证会在表单汇总之前将其选中.

然而,我将所有这些形式移动到boostrap模态,并且页面的表单通过ajax调用在模态内动态加载.在此更改之后,我的客户端验证永远不会触发,我还注意到验证插件不像novalidate="novalidate"以前那样将标记添加到表单中.

这是我的代码简化

然后我使用以下jquery,因为我想捕获所有表单提交并执行一些额外的逻辑:

   $(document).on('submit', '.formDetail', function (e) { 

        e.preventDefault();

        //added this to see if it would throw error but it doesn't
        var form = $(".formDetail");
        form.validate();

         //this is always true
         if ($(this).valid()) {


            $.ajax({
                processData: false,
                contentType: false,
                data: new FormData(this),
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                success: function (data) {
                   //other logic
                 }
            }); 
         }
    });

如果String1留空并且我提交并逐步执行javascript控制台'($(this).valid())'是alwasy true.如果我改变它($(".formDetail").valid()) 的结果是相同的,即总是如此true.

它也没有像我在切换到动态ajax模式窗体之前那样在HTTP POST之前在屏幕上显示错误消息.

我怎样valid()才能上班.单步执行代码时,我的控制台中没有javascript错误,并且 …

这是我的Javascript代码，在间隔1中以分钟为单位递增

fillMinutes = function () {
            var table = widget.find('.timepicker-minutes table'),
                currentMinute = viewDate.clone().startOf('h'),
                html = [],
                row = $('<tr>'),
                step = options.stepping === 1 ? 5 : options.stepping;

            while (viewDate.isSame(currentMinute, 'h')) {
                if (currentMinute.minute() % (step * 4) === 0) {
                    row = $('<tr>');
                    html.push(row);
                }
                row.append('<td data-action="selectMinute" class="minute' + (!isValid(currentMinute, 'm') ? ' disabled' : '') + '">' + currentMinute.format('mm') + '</td>');
                currentMinute.add(step, 'm');
            }
            table.empty().append(html);
        }

我想修改此值以每隔15分钟递增一次。有人可以帮我吗

我一直关注这里的官方指南,但仍然得到错误.GitHub上的用户经历了同样的问题,但没有提到它是如何解决的,只是他的代码中有一个错误调用他的工厂,我无法从他的plnkr中找出任何东西.

控制器:

function ActivitiesController($scope, $state, $window, Authentication, activity, $uibModal, $uibModalInstance) {
    var vm = this;

    vm.authentication = Authentication;
    vm.activity = activity;
    vm.openModal = openModal;
    vm.okOnModal = okOnModal;
    vm.cancelOnModal = cancelOnModal;

    function openModal() {
        $uibModal.open({
            template: "<div class='modal-header'>"
                        + "<h3 class='modal-title' id='modal-title'>Friends</h3>"
                    + "</div>"
                    + "<div class='modal-body list-group' id='modal-body'>"
                        + "<a ng-repeat='friend in vm.friends' class='list-group-item'>"
                            + "<img class='friend-user-profile-picture' ng-src='{{ friend.friend.profileImageURL }}' alt='{{ friend.friend.displayName }}'>"
                            + "<h4 class='list-group-item-heading' ng-bind='friend.friend.displayName'></h4>"
                            + "<small class='list-group-item-text' ng-bind='friend.friend.username'></small>"
                            + …

我想显示从数据表到模态引导程序的数据.

例:

Name    | prenom | id |edit
example | test   |  2 |button edit 

按钮将数据发送到模态以显示更新.

按钮代码:

<a class="btn btn-info" role="button" data-toggle="modal" data-form="{% url 'up' id=val.id }" data-target="#myEdit" >Edit</a>

模态代码:

<div class="modal fade" id="myEdit" role="dialog">
    <div class="modal-dialog">
        <form  class="well contact-form" method="post" action="{% url 
      'up'}">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <label for="usr">Name:</label>
                    <input type="text" class="form-control" required="" name="uss" value="{{ instance.name }}" id="uss">
                    <label for="pwd">Password:</label>
                    <input  type="password"  class="form-control" required="" value="{{ instance.sname …