bootbox自定义dialog、confirm、alert样式，以及基本设置方法setDefaults中可用参数

最新推荐文章于 2023-03-26 08:13:53 发布

zh921112

最新推荐文章于 2023-03-26 08:13:53 发布

阅读量10w+

点赞数 4

分类专栏： Java 文章标签： bootbox confirm alert dialog setDefaults

本文链接：https://blog.csdn.net/zh921112/article/details/41513161

版权

Java 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>bootbox自定义dialog、confirm、alert样式，基本全局设置方法setDefaults</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
	<style>
		.btn-myStyle{ background-color: #2c3e50; color:#fff}
		.btn-myStyle:hover,.btn-myStyle:focus{color:#fff;text-decoration: none;}
	</style>
</head>
<body>
    <button id="test" class="btn btn-default">测试</button>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://bootboxjs.com/bootbox.js"></script>
    <script>
		$(document).ready(function() {
			//bootbox.setDefaults({
				/**
				* @optional String
				* @default: en
				* which locale settings to use to translate the three
				* standard button labels: OK, CONFIRM, CANCEL
				*/
				//locale: "fr",
				/**
				* @optional Boolean
				* @default: true
				* whether the dialog should be shown immediately
				*/
				//show: true,
				/**
				* @optional Boolean
				* @default: true
				* whether the dialog should be have a backdrop or not
				*/
				//backdrop: true,
				/**
				* @optional Boolean
				* @default: true
				* show a close button
				*/
				//closeButton: true,
				/**
				* @optional Boolean
				* @default: true
				* animate the dialog in and out (not supported in < IE 10)
				*/
				//animate: true,
				/**
				* @optional String
				* @default: null
				* an additional class to apply to the dialog wrapper
				*/
				//className: "my-modal"
			//}); 
		});
	
	
        $(document).on("click", "#test", function (e) {
            /*bootbox.confirm("Hello world!", function (result) {
				if(result) {
					alert('点击了确认按钮');
				} else {
					alert('点击了取消按钮');
				}
            });
            bootbox.dialog({
                message: "I am a custom confirm",
                title: "Confirm title",
                buttons: {
                    Cancel: {
                        label: "Cancel",
                        className: "btn-default",
                        callback: function () {
                            alert("Cancel");
                        }
                    }
                    , OK: {
                        label: "OK",
                        className: "btn-primary",
                        callback: function () {
                            alert("OK");
                        }
                    }
                }
            });
			
	    bootbox.confirm({
		buttons: {
			confirm: {
				label: '我是确认按钮',
				className: 'btn-myStyle'
			},
			cancel: {
				label: '我是取消按钮',
				className: 'btn-default'
			}
		},
		message: '提示信息',
		callback: function(result) {
			if(result) {
				alert('点击确认按钮了');
			} else {
				alert('点击取消按钮了');
			}
		},
		//title: "bootbox confirm也可以添加标题哦",
	    });*/
	    bootbox.alert({
		    buttons: {
			   ok: {
				    label: '我是ok按钮',
				    className: 'btn-myStyle'
			    }
		    },
		    message: '提示信息',
		    callback: function() {
			    alert('关闭了alert');
		    },
		    title: "bootbox alert也可以添加标题哦",
	    });
       });
		
    </script>
</body>
</html>

zh921112

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
3
评论
bootbox自定义dialog、confirm、alert样式，以及基本设置方法setDefaults中可用参数

bootbox自定义dialog、confirm、alert样式，基本全局设置方法setDefaults .btn-myStyle{ background-color: #2c3e50; color:#fff} .btn-myStyle:hover,.btn-myStyle:focus{color:#fff;text-decoration: none;} 测试
复制链接

扫一扫