JS弹出框效果BOOTBOX.JS

最新推荐文章于 2025-01-20 09:09:41 发布

转载最新推荐文章于 2025-01-20 09:09:41 发布 · 2.2k 阅读

文章标签：

#js #javascript

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍 Bootbox.js 的基本用法，包括简单的警告、提示及确认对话框，并详细展示了如何通过 dialog 方法创建复杂的自定义对话框。

JS弹出框效果BOOTBOX.JS

在使用后台模板Ace admin时，我发现一个比较不错的提示框效果。接口很清晰，可以自定义。——Bootbox.js

bootbox的用法非常简单。

制作提示框效果，我们需要的效果，也就是alert警告，info提示，confirm确认，还有一个就是自定义了dialog。

bootbox.alert(message, callback)

bootbox.prompt(message, callback)

bootbox.confirm(message, callback) //返回值为布尔类型，true或false

稍微复杂一点的就是dialog

bootbox.dialog({

    title
 : "修改密码",

    message
 : "<div
 class='well ' style='margin-top:25px;'><form class='form-horizontal' role='form'><div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>旧密码</label><div class='col-sm-9'><input type='text' id='txtOldPwd' placeholder='请输入旧密码'
 class='col-xs-10 col-sm-5' /></div></div><div class='space-4'></div><div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtNewPwd1'>新密码</label><div class='col-sm-9'><input type='text' id='txtNewPwd1' placeholder='请输入新密码' class='col-xs-10
 col-sm-5' /></div></div><div class='space-4'></div><div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtNewPwd2'>确认新密码</label><div class='col-sm-9'><input type='text' id='txtNewPwd2' placeholder='再次输入新密码' class='col-xs-10
 col-sm-5' /></div></div></form></div>",

    buttons
 : {

        "success"

: {

            "label"

: "<i
 class='icon-ok'></i> 保存",

            "className"

: "btn-sm
 btn-success",

            "callback"

: function()
 {

                var

txt1 = $("#txtOldPwd").val();

                var

txt2 = $("#txtNewPwd1").val();

                var

txt3 = $("#txtNewPwd2").val();

                if(txt1
 == ""

|| txt2 == ""

|| txt3 == ""){

                    bootbox.alert("密码不能为空");

                    return

false;

                }

                if(txt2
 != txt3 ){

                    bootbox.alert("两次输入新密码不一致，请重新输入!");

                    return

false;

                }

                var

info = {"opt":"changepassword","oldpwd":txt1,"newpwd1":txt2,"newpwd2":txt3};

                //$.post("../CommonServlet",info,function(data){

                    bootbox.alert("密码更新成功");

                //},'json');

            }

        },

        "cancel"

: {

            "label"

: "<i
 class='icon-info'></i> 取消",

            "className"

: "btn-sm
 btn-danger",

            "callback"

: function()
 { }

        }

    }

});