自定义弹框样式,自定义confirm按钮,
·
不同的浏览器其自带的alert();confirm();样式大致是一样的,挺丑的。在之前做过的项目中整理了一份弹出框的代码。
整理后的代码已经上传github,有兴趣的朋友可以看看。
<!DOCTYPE html>
<!--自定义弹框-->
<html lang="zh">
<head>
<link rel="stylesheet" type="text/css" href="css/mbox.css"/> <!--背景样式 弹框样式-->
<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script><!--jquery库-->
<script type="text/javascript" src="js/jm-qi.js" ></script><!--自定义弹框大小,提示信息,样式,icon。。。。-->
</head>
<body>
<a style="cursor: pointer" class="delcompanyClass">删除</a>
<script>
$(".delcompanyClass").on('click',function(){
$.mbox({
area: [ "450px", "auto" ], //弹框大小
border: [ 0, .5, "#666" ],
dialog: {
msg: "啦啦啦这是弹框提示内容啦啦啦这是弹框提示内容啦啦啦这是弹框提示内容!!",
btns: 2, //1: 只有一个按钮 2:两个按钮 3:没有按钮 提示框
type: 2, //1:对钩 2:问号 3:叹号
btn: [ "试一试", "再看看"], //自定义按钮
yes: function() { //点击左侧按钮:成功
alert();
},
no: function() { //点击右侧按钮:失败
return false;
}
}
});
});
</script>
</body>
</html>
css和js代码已经上传github上。
https://github.com/xiaobaidu/mine.git
更多推荐
已为社区贡献1条内容
所有评论(0)