jQuery适用于手机端的弹出提示框代码



204 814 272



特效描述:jQuery 适用于手机端 弹出提示框,jQuery弹出提示框,手机端提示框代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="common.css">

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>
<div class="demo" id="demo1">toast</div>
<div class="demo" id="demo2">alert</div>
<div class="demo" id="demo3">confirm</div>
<div class="demo" id="demo4">confirm+input</div>



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


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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