jQuery适用于手机端的弹出层提示对话框插件



147 586 196



特效描述:手机端弹出层 提示对话框插件,jquery  alert、toast、confirm等提示插件(适用手机端)

代码结构

1. 引入CSS

<link rel="stylesheet" href="common.css?v=20160520">

2. 引入JS

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="alertPopShow.js"></script>

3. HTML代码

    <script type="text/javascript">
    $(function(){
	   $('#demo1').on('click', function(){
			webToast("恭喜您,修改成功恭喜您,修改成功恭喜您修改成功恭喜您","middle",3000);
	   });
	   $('#demo2').on('click', function(){
			popTipShow.alert('弹窗标题','自定义弹窗内容,居左对齐显示,告知需要确认的信息等', ['知道了'],
				function(e){
				  //callback 处理按钮事件		  
				  var button = $(e.target).attr('class');
				  if(button == 'ok'){
					//按下确定按钮执行的操作
					//todo ....
					this.hide();
				  }	
				}
			);
	   });
	   $('#demo3').on('click', function(){
			popTipShow.confirm('弹窗标题','自定义弹窗内容,居左对齐显示,告知需要确认的信息等',['确 定','取 消'],
				function(e){
				  //callback 处理按钮事件
				  var button = $(e.target).attr('class');
				  if(button == 'ok'){
					//按下确定按钮执行的操作
					//todo ....				
					this.hide();
					setTimeout(function() {
						webToast("操作成功","top", 2000);
					}, 300);
				  }
				  if(button == 'cancel') {
					//按下取消按钮执行的操作
					//todo ....
					this.hide();
					setTimeout(function() {
						webToast("您选择“取消”了","bottom", 2000);
					}, 300);
				  }
				}
			);
	   });
	   $('#demo4').on('click', function(){
			var html = "<label>姓名:<input class='confirm_input' placeholder='请输入'></label>";
			popTipShow.confirm('弹窗标题',html,['确 定','取 消'],
				function(e){
				  //callback 处理按钮事件
				  var button = $(e.target).attr('class');
				  if(button == 'ok'){
					if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){
						webToast("姓名不能为空!","bottom", 3000);
						return;
					}	
					this.hide();
					setTimeout(function() {
						webToast($(".confirm_input").val(),"bottom", 3000);
					}, 300);
					//按下确定按钮执行的操作
					//todo ....								
				  }
				  if(button == 'cancel') {
					//按下取消按钮执行的操作
					//todo ....
					this.hide();
					setTimeout(function() {
						webToast("您选择“取消”了","top", 2000);
					}, 300);
				  }
				}
			);
	   });
	});
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到