漂亮实用的提示框












<style>
.demo{width:300px; margin:60px auto 10px auto}


button, .button {
  background-color: #AEDEF4;color: white;border: none;box-shadow: none;
  font-size: 17px;font-weight: 500;font-weight: 600;
  border-radius: 3px;padding: 15px 35px;margin: 26px 5px 0 5px;cursor: pointer; }
button:hover, .button:hover {background-color: #a1d9f2; }
</style>




<div id="main">
            <div class="demo">
                <div class="demo_1">
                    基本示例:<button>点击这里</button>
                </div>
                <div class="demo_2">
                    提示成功:<button>点击这里</button>
                </div>
                <div class="demo_3">
                    提示失败:<button>点击这里</button>
                </div>
                <div class="demo_4">
                    提示确认:<button>点击这里</button>
                </div>
                <div class="demo_5">
                    定义内容:<button>点击这里</button>
                </div>
                <div class="demo_6">
                    确认输入:<button>点击这里</button>
                </div>
            </div>
        </div>



<script>
$(function(){
	$(".demo_1 button").click(function(){
		swal("这是一个信息提示框!");
	});
	$(".demo_2 button").click(function(){
		swal("Good!", "弹出了一个操作成功的提示框", "success");
	});
	$(".demo_3 button").click(function(){
		swal("OMG!", "弹出了一个错误提示框", "error");
	});
	$(".demo_4 button").click(function(){
		 swal({
			title: "您确定要删除吗?", 
			text: "您确定要删除这条数据?", 
			type: "warning",
			showCancelButton: true,
			closeOnConfirm: false,
			confirmButtonText: "是的,我要删除",
			confirmButtonColor: "#ec6c62"
			}, function() {
				$.ajax({
					url: "do.php",
					type: "DELETE"
				}).done(function(data) {
					swal("操作成功!", "已成功删除数据!", "success");
				}).error(function(data) {
					swal("OMG", "删除操作失败了!", "error");
				});
			});
	});
	
	$(".demo_5 button").click(function(){
		swal({   
			title: "Good!",   
			text: '自定义<span style="color:red">图片</span>、<a href="#">HTML内容</a>。<br/>5秒后自动关闭。',   
			imageUrl: "images/thumbs-up.jpg",
			html: true,
			timer: 5000,   
			showConfirmButton: false
		});
	});
	
	$(".demo_6 button").click(function(){
		swal({   
			title: "输入框来了",   
			text: "这里可以输入并确认:",   
			type: "input",   
			showCancelButton: true,   
			closeOnConfirm: false,   
			animation: "slide-from-top",   
			inputPlaceholder: "填点东西到这里面吧" 
		}, function(inputValue){   
			if (inputValue === false) return false;      
			if (inputValue === "") {     
				swal.showInputError("请输入!");     
				return false   
			}      
			swal("棒极了!", "您填写的是: " + inputValue, "success"); 
		});
	});
});
</script>




评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值