BootstrapDialog在另一个无法正常工作的内部确认

时间:2017-02-15 16:45:04

标签: javascript bootstrap-dialog

我使用BootstrapDialog库来显示模态对话框警报和确认消息我在另一个函数中使用 BootstrapDialog.confirm 方法重用一些参数,如按钮文本,消息文本等....因为我为测试目的编写了下面的代码,但函数不返回任何内容总是返回 undefined

 <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" rel="stylesheet"/>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script>
function callconfirm()
{
   // var isConfirmed
     BootstrapDialog.confirm({
            title: 'WARNING',
            message: 'Warning! Drop your banana?',
            type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            closable: false, // <-- Default value is false
            draggable: false, // <-- Default value is false
            btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel',
            btnOKLabel: 'Drop it!', // <-- Default value is 'OK',
            btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
            callback: function(result) {
                // result will be true if button was click, while it will be false if users close the dialog directly.
                if(result) {
                  return true;
                }else {
                    return false;
                }
            }
        });

}

function checkConfirm()
{
    var v=callconfirm();
    console.log(v);
}
</script>
</head>
<body>
<button type="button"  value="click" onclick="checkConfirm()" style="height: 50px;width: 50px" />
</body>

4 个答案:

答案 0 :(得分:0)

&#13;
&#13;
<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" rel="stylesheet"/>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script>
function callconfirm(cb)
{
    var isConfirmed
     BootstrapDialog.confirm({
            title: 'WARNING',
            message: 'Warning! Drop your banana?',
            type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            closable: false, // <-- Default value is false
            draggable: false, // <-- Default value is false
            btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel',
            btnOKLabel: 'Drop it!', // <-- Default value is 'OK',
            btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
            callback: cb
        });

}
</script>
</head>
<body>
<button type="button"  value="click" onclick="javascript:callconfirm(console.log)" style="height: 50px;width: 50px" />
</body>
 
&#13;
&#13;
&#13;

答案 1 :(得分:0)

Template.navbar.events({ //responses to events 'click #hamburgButton': function () { $('#hamburg') toggleClass("collapsed") } }); 将调用该操作的回调。因此,如果您可以在回调中执行BootstrapDialog.confirm,那就更好了。该函数将立即返回,您将无法依赖结果值,直到用户实际单击“确定”或“取消”按钮。

工作代码:

console.log

答案 2 :(得分:0)

感谢Agalo和Tareq的建议和帮助我发布了解决方案代码,这可能对其他人有所帮助。

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" rel="stylesheet"/>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script>

function callconfirm(cb)
{
   // var isConfirmed
     BootstrapDialog.confirm({
            title: 'WARNING',
            message: 'Warning! Drop your banana?',
            type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            closable: false, // <-- Default value is false
            draggable: false, // <-- Default value is false
            btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel',
            btnOKLabel: 'Drop it!', // <-- Default value is 'OK',
            btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
            callback:cb /*function(result) {
                // result will be true if button was click, while it will be false if users close the dialog directly.
                if(result) {
                  return true;
                }else {
                    return false;
                }
            }*/
        });

}

function b1checkConfirm(result)
{
    //callconfirm();
    console.log("B1 click and result is "+result);
}
function b2checkConfirm(result)
{
    //callconfirm();
    console.log("B2 click and result is "+result);
}
</script>
</head>
<body>
<button type="button"  onclick="callconfirm(b1checkConfirm)" style="height: 50px;width: 50px" >B1</button>
<button type="button"  onclick="callconfirm(b2checkConfirm)" style="height: 50px;width: 50px" >B2</button>
</body>

答案 3 :(得分:0)

我收到了来自此插件的Dante创建者的回复,我分享了这个波纹管,它可以正常使用额外的参数。

https://github.com/nakupanda/bootstrap3-dialog/issues/329