标签: bootstrap-modal

问题是用户必须向下滚动才能查看模态体内的所有内容.但是,当我打印模态时,唯一打印的部分是可查看的部分.我希望打印整个模态的内容.我已经尝试了下一页的每一段代码,但没有一段代码打印出整个模态.

Twitter Bootstrap:打印模态窗口的内容

我想有条件地关闭bootstrap模态框.如果我使用 $('#modal').modal('hide');它,我的代码就会出错.如果我data-dismiss="modal"在HTML模板中使用模态解除操作,则应在按钮单击时执行实际功能.

那么,有没有其他方法可以关闭bootstrap模式或data-dismiss="modal"在运行时使用的任何想法？

我的页面中有这行代码:

<div id='data'>...</div>      
<a id='addMore' href='#'>Add more </a>   

这一行实际上是一个bootstrap模式.我希望当用户点击它时,我想要克隆它上面的div.问题不在于克隆的代码,而是甚至没有引发click事件.在我的.js文件中,我有这个:

$('#addMore').click (...)

省略号用于防止默认和克隆的代码.我试着用警报进行测试.它仍然无法正常工作.我不知道为什么.

我发现如果我onClick='alert(...)在标签中添加它,它就可以了.

有人可以帮忙吗？

这是模态的HTML(如果有人帮助格式化,请不要介意.我知道这是一团糟):

<div id="addEmailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addEmailLabel" aria-hidden="true">   
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button> 
        <h3 id="addEmailLabel">Add Email</h3>
    </div>
    <div class="modal-body">
        <div id="emailData">
            <input type="text" placeholder="Name (optional)" class="input-xlarge" />
            <input type="email" placeholder="Email" />
        </div>
        <a id="addMore" href="#">Add more&hellip;</a>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="btnAdd">Add</button>
    </div>
</div>

我正在使用Bootstrap Modal Window插件,它的工作正常,但我想打开另一个模型窗口,当我点击下一个并关闭第一个.我该怎么做？

$('[data-toggle="modal"]').click(function(e) 
    {
        e.preventDefault();
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0)
        {
            $(url).modal('open');
        } 
        else 
        {
            $.get(url, function(data) 
            {
                $(data).modal();
            }).success(function() { $('input:text:visible:first').focus(); });
        }
    });

<a href="next.html" data-toggle="modal">Add Record</a>

next.html文件代码

<div class="modal fade" id="compose-modal" role="dialog" 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">First Window</h4>
            </div>
            <form action="#" method="post">

                <div class="modal-footer clearfix">
                    <button type="button" data-dismiss="modal">Discard</button>

                    <button type="submit">Submit</button>
                     <a href="next2.html" data-toggle="modal" >Next</a>
                </div>
            </form>
        </div>
    </div>
</div>

如何在关闭/隐藏/关闭时清除bootstrap模式？

我有以下模态定义:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   Add New Comment
</button>

包含模态的局部视图

@Html.Partial("_CreateComment", Model)


 // Partial view which contains modal

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      @using (Ajax.BeginForm("AddComment", "Blog", new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "comments",
                OnSuccess = "$('#myModal').modal('hide');"

            }))
      {
        <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">Add Comment</h4>
        </div>
        <div class="modal-body">
                @Html.ValidationSummary(true)
                @Html.HiddenFor(model => model.Blog.BlogID)

                <div class="form-group">
                    @Html.LabelFor(model => model.BlogComment.Comment)
                    @Html.TextAreaFor(model => …

我正在使用Bootstrap和JQuery UI,我似乎偶然发现了一个问题.我在Bootstrap中设计了大部分代码.我试图实现一个年龄验证对话框" 验证:如果一个人不到18岁就做某事......".我设法用JQuery实现了年龄检查验证.接下来,我想让输入字段看起来像bootstraps输入字段,因为我的主窗体中的所有输入字段看起来都像bootstraps输入字段.我怎么能做到这一点？

      $(document).ready(function () {
        $("#age").datepicker({
            onSelect: function(value, ui) {
                var current = new Date().getTime(), 
                    dateSelect = new Date(value).getTime();
                    age = current - dateSelect;
                    ageGet = Math.floor(age / 1000 / 60 / 60 / 24 / 365.25); // age / ms / sec / min / hour / days in a year
                if(ageGet < 18){
                    less_than_18(ageGet);
                }
            },
            yearRange: '1900:+0d',//base year:current year
            changeMonth: true,
            changeYear: true,
            defaultDate: '-18yr',
        }).attr("readonly", "readonly"); //prevent manual changes


        function …

我在将 javascript 变量加载到引导程序模型输入框中时遇到了一些问题：

setTimeout(function() {
  swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
      type: "warning",
      confirmButtonText: "OK"
    },
    function(isConfirm) {
      if (isConfirm) {

        $('#hours_work').val(data.value); //data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
        $('#overtime_requset').modal('show');
        clear_field();
      }
    });
}, 1);

<div class="modal" id="overtime_requset">
  <div class="modal-dialog ">
    <form id="overtime_requset_form">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header"> …

我正面临着anular-ui-bootstrap模态指令的问题.我在我的应用程序中使用angular的ui-select组件作为html选择的替代品.这个ui-select在包含的任何页面中都能正常工作.但是当我试图将它包含在模态弹出窗口中时(使用ui-bootstrap $ modal服务),下拉列表不会显示选项

这个问题在这里转载

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
  $scope.addresses = [{
  "id":1,
    "name": "chennai"
  }, {
    "id":2,
    "name": "banglore"
  }, {
    "id":3,
    "name": "madurai"
  }];
});

 <div class="modal-body">
        City
            <ui-select ng-model="selAddress">
                <ui-select-match placeholder="Choose an address">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="address in addresses track by $index" refresh-delay="0">
                    <div ng-bind-html="address.a | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
            
            Selected: <b>{{ selAddress }}</b>
        </div>

任何帮助将非常感激.提前致谢.

我正在使用controllerAs语法来避免我的控制器中的$ scope汤,并且还使用ui.bootstrap来呈现模态视图.

我需要打开一个与当前控制器共享相同范围的modalInstace.注入示波器时,您可能会执行以下操作:

var modalInstance = $uibModal.open({
      templateUrl: 'addEditModal.html',
      scope: $scope
    });

但是,由于我没有注入范围,并且使用controllerAs语法,因此无效.

根据我的发现,您需要使用resolve来传递数据,但您必须通过函数显式传递它.有没有办法通过整个范围？

我需要在该模态中执行一些操作,并且传递大量数据似乎有点过分.

不想这样做,因为它看起来很乱......

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    user: function() {
        return vm.user;
    },
    something: function() {
        return vm.something;
    },
    blah: function() {
        return blah;
    }
  }
});

有更好的想法吗？

我正在将1000条记录加载到bootstrap select下拉列表中.在Chrome中需要大约2秒钟,但在IE 9中需要30秒.此外,在IE中取消或x输出引导模式也需要10 + s.API调用没问题,但渲染速度很慢; 有人可以给我一些方向吗？

所以我正在加载客户列表并设置所选.这是代码.

    var customerPicker = $('#customer-picker');
    API.getCustomers().then(function (result) {
        loadDropdown(customerPicker, result.customers); 

        // set the selected to current customer; it takes 10s in IE
        customerPicker.val(currentCustomerId).selectpicker('refresh'); 

        // it takes about 10s in IE too. selector is the bs modal div
        $(selector).css('z-index', '1060').modal('show'); 
    }).catch(function (errorMessage) {
        ToastManager.showError(errorMessage || 'An error occurred while loading customer list. Please try again.');
    });

    function loadDropdown($div, arr) {
        var options = '';
        $.each(arr, function (i, item) {
            options = options + …