我在我的网站上创建了一个登录按钮,打开一个模态.B/ci必须通过AJAX加载其内容,我使用bootbox初始化一个.然后我把内容加载到我的模态中.但是应该位于页脚顶部的线条位于中间.

如果我尝试使用Firefox的开发工具复制最终的HTML,它可以工作.如果我取消链接所有样式表但是bootstwatch的主题,同样的问题.这是js:

 $('#login').click(function(event) {
        event.preventDefault();
        bootbox.dialog({
            message: '<img class="col-md-4 col-md-offset-4" src="/images/load/spinner-256.gif" />',
            title: "Please login",
            buttons: {
              'cancel':{
                  label: 'cancel',
                  className: 'btn-link'
              }
            }
        });
        $('.bootbox-body').addClass('loading-bb');
        $.ajax({
            url: '/api/ajax/login',
            success: function(data) {

                $('.bootbox-body').html(data)
                $('.bootbox-body').removeClass('loading-bb');
            }
        })
    })

您可能还想看到工作示例:http://polar-wave-4072.herokuapp.com/

这是我关于SO的第一个问题.

当我在作用域上拼接数组元素时,在bootbox.js的回调中完成时,不会反映该更改.

作品:

$scope.deleteA = function() {
    if (confirm("Really delete Item 3?")) {
      $scope.itemsA.splice(2, 1);
    }
}

不起作用:

$scope.deleteB = function() {
    bootbox.confirm("Really delete Item 3?", function(answer) {
      if (answer === true) {
        $scope.itemsB.splice(2, 1);
      }
    });
}

我主要是想了解原因.这对我来说比拥有一个花哨的解决方案更重要.

我创建了一个Plunker来显示效果

我正在使用http://bootboxjs.com/examples.html中的 bootbox.js ,这令人印象深刻.但是在设置对话框的位置时我遇到了问题.

我想放置屏幕的对话框中心.我正在使用此代码,但对话框保持在屏幕顶部.

 bootbox.alert('Danger!!').find('.modal-content').css({
     'background-color': '#f99',
     'font-weight': 'bold',
     color: '#F00',
     'top': '50%',
     'margin-top': function() {
         return -(box.height() / 2);
     },
     'font-size': '2em',
     'font-weight': 'bold'
 });

请告知如何设置屏幕的对话框中心.

我在网上搜索过,但我找不到将滚动添加到bootbox自定义对话框的解决方案.无论如何,我可以让它工作.我需要一个垂直滚动.

这可能吗？

我想在我的Angular2项目中使用Bootbox.我搜索了很多,但对我来说没有任何相关的解决方案.
我也试过,angular2-modal但在使用时有很多问题angular2-modal,请为此建议任何好的doc/Examples/Demos.

我正在尝试自定义启动箱设计.我已成功获得如下所示的输出:

我的代码是

        var dialog = bootbox.alert({
    closeButton: false,
         title: false,
         message: 'hello',
         className: "my-popup"
      });
      dialog.init(function(){
var message = $(".my-popup").find(".bootbox-body");
$(".my-popup").find(".modal-footer").prepend(message);
$(".my-popup").find(".modal-footer div").css({"display":"inline-block", "padding-right":"10px", "color":"#f7f7f7"});
 $(".my-popup").find(".modal-body").remove();    
});

这很好用.但是我的页面上还有更多警报,我也希望这样显示.所以我试图缩小上面的代码或设置bootbox的公共属性,但之后我的init功能停止工作.

这是小提琴.我正在bootbox.setDefaults设置一个公共类,然后尝试提醒但init现在不工作.有没有办法我可以设置init函数,bootbox.setDefaults 所以我只是bootbox.alert()每次只调用.不是整个代码.

我试图让一个jQuery选择/下拉列表在Bootbox模式中工作.我在标准HTML页面上的代码几乎完全相同,所以我认为只需将列表弹出一个模态即可.我生成我的div并在模态中选择对象,然后在"显示"之后,我调用Chosen:

div.on("shown", function() {
    $(".chzn-select").chosen();
    $(".chzn-select-deselect").chosen({allow_single_deselect:true});
    myApp.init();
});

在此之后,Chosen似乎被打破了.选择项目显示为灰色 - 我无法单击它们.

在myApp.init()中,我填充了选择项,它可以工作.

在模态的幕后,我可以看到Chosen容器似乎已初始化,但它没有将select选项传递给chzn-drop div.在图像中,chzn-results UL应该填充选项.这是模态版本:

从HTML版本开始,它应该是什么样子:

在HTML版本中,我的代码位于body标签的底部(类似地,选择选项填充在myApp.init()中),它似乎工作得很好.通话顺序似乎相同......

$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(document).ready(function(){   
  myApp.init();
});

这不仅仅是z-index的问题 - 我已经玩过没有运气了.似乎在模态中,Chosen插件以某种方式变得混乱而不是绑定或更新,即使它已经正确初始化.我不确定如何对其进行故障排除,也找不到其他有相同问题的人...这让我觉得这可能是一个时间问题(但为什么它在HTML中有用？),或者我做的事情很愚蠢(高度可能).有没有人有任何关于在哪里看或有什么问题的建议？

谢谢!

============================

为选择输入添加HTML(根据Christopher的问题)

对于这两个版本,我使用以下代码填充select(myApp.init()中编辑的版本):

$.ajax call to a RESTful URL

var callbackSuccess = function(data){
    if ( data ) {
    populateDropDownById(data, 'objectiveBanks');

        //Other things
    }
};

function populateDropDownById(data, elementId) {
    $('#' + elementId).append('<option value = "null"> -- Select -- </option>');
    $.each( data, function( id, bean ) {
    var name = bean.displayName.text;
    var id =  bean.id;
        $('#' …

在aspx页面中，有一个像这样的asp:linkbutton：

<asp:LinkButton runat="server" ID="btExit" Text="Exit"
                OnClientClick="javascript:return confirmExit();" 
                EnableViewState="false" 
                OnClick="ExitButtonClick"></asp:LinkButton>

这是 JavaScript 函数：

<script type="text/javascript">
function confirmExit() {
    bootbox.confirm("Are you sure?", function (confirmed) {
        return confirmed;
    });
}
</script>

问题是，据我所知， bootbox.confirm 是异步工作的，并且后面代码上的 ExitButtonClick 函数是在不等待用户确认的情况下执行的。

我找到了一个有效的解决方案，使用隐藏按钮：

<asp:LinkButton runat="server" ID="btExit" Text="Exit"></asp:LinkButton>
<asp:Button runat="server" ID="btExitHidden" onclick="ExitButtonClick" style="display:none;" />

这是 javascript 部分：

<script type="text/javascript">
    $("#btExit").click(function (e) {
        e.preventDefault();
        bootbox.confirm("Are you sure?", function (confirmed) {
            if (confirmed) {
                $("#btExitHidden").click();
            }
        });
    });
</script>

我的问题是是否有一种更“漂亮”和“标准”的方式与 Bootbox.confirm 同步工作，而不使用隐藏按钮。

我正在为我的模态使用名为 Bootboxjs 的 jQuery 插件。

这是我运行代码的方式：

bootbox.dialog({
    title: '<i class="fa fa-thumbs-up"/></i>&nbsp;&nbsp;View Likes',
    buttons: {
        close: {
            label: '<i class="fa fa-times"></i>&nbsp;&nbsp;Close',
            className: "btn-danger",
            callback: function() {

                // Close the modal

            }

        }
    },
    message: '<span name="getLikesResults"></span>'
});

我正在为一个项目制作一个插件，我不希望这影响现有的模态样式，但是当内容达到最大高度时，我需要使这个特定的模态可滚动。

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

我怎样才能将上面的 CSS 应用到这个bootbox模态？

我有一个 <ul>元素,当它被点击时打开一个bootbox.双击此元素会触发JQuery中的onclick两次

$("#email-list").on("click", ".list-group-item", function (e) {
bootbox.confirm("Send a forgotten password email to " + email + "?", function (result) {...}}

我尝试使用'e.preventDefault()'

$(document).ready(function () {

    $("#email-list").dblclick(function (e) {

        e.preventDefault();
    });

});

我甚至尝试禁用点击元素,但都失败了.引导箱仍然出现两次.

$("#email-list").bind('click', function () { return false; });
//...do stuff
$("#email-list").unbind('click');

有人有建议吗？