<!DOCTYPE html>
<html style="height: 100%;">
<head lang="en">
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>alertPopShow</title>
<link rel="stylesheet" href="common.css?v=20160520">
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="alertPopShow.js"></script>
</head>

<body>

<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>
</body>
<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>
</html>

js 弹层 提示的更多相关文章

  1. Layer.js弹层的一些简单的使用

    //-----------这里只是简单的做一下记录,没有封装,作为笔记防止忘记了 //----contentMsg 里面是可以传入 HTML代码的 top.layer.alert(contentMsg ...

  2. 有关js弹出提示框几种方法

    1直接提示只有确定功能的提示框 只显示提示信息 alert(“提示信息”); alert ();的参数只有一个就是提示信息,无返回值 2 弹出输入框让你输入内容 prompt() ; 有两个参数:第一 ...

  3. js 弹层下面的body禁止滚动

    弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想 ...

  4. HTML JS 弹层后底部页面禁止滚动处理

    1.打开新页面时需要禁止鼠标滚轮,禁止页面滑动: 1 2 3 4 在调用显示层时加上这句js代码就可以了: document.documentElement.style.overflow = &quo ...

  5. 【Javascript】好用的js弹层插件，layerUI

    官网:layerUI 中文手册:layerAPI

  6. SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ，弹出提示框

    1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...

  7. js几个常用的弹层

    js弹层技术很常见,自己每次用上网找,一找一大堆. 对比了几种,考虑通用性和易用性,这里记录两个. jQueryUI的http://jqueryui.com/dialog/#modal-form ar ...

  8. javascript右下角弹层及自动隐藏

    在编写项目中总会需要有个右下角弹层提示公告的需求,怎么用更简单方面,更简洁代码,实现更好用户体验这个就是我们的所要做的内容.市场这块弹层很多,但功能不尽如人意.下面分享早些时候自己编写,以及现在还在应 ...

  9. [vuejs] vue2.0-layer-mobile移动端弹层

    vue2.0-layer-mobile移动端弹层 本次组件升级支持slot内容分发功能,实现高定制内容风格的弹层 安装方法 npm install vue2-layer-mobile -S 初始化 i ...

随机推荐

  1. HTML中的<audio>和<video>标签讲解

    关于<audio>标签讲解:点击这里 这里来一段简单的html5的音频代码: <audio src="someaudio.wav"> 您的浏览器不支持 au ...

  2. HDU 2955 Robberies(01背包)

    Robberies Problem Description The aspiring Roy the Robber has seen a lot of American movies, and kno ...

  3. HDU 1069 I Think I Need a Houseboat(模拟)

    题目链接 Problem Description Fred Mapper is considering purchasing some land in Louisiana to build his h ...

  4. jms的初步认识

    (内容取自:http://itindex.net/detail/49721-jms-jms-%E5%BA%94%E7%94%A8) 什么是JMS? JMS即java消息服务, JMS通过消息的形式来降 ...

  5. iis本地无法通过ip地址访问网站

    防火墙等通通检查过没有发现问题,最后发现是我安装了一款adsafe的广告过滤软件捣的鬼,此软件设置界面没有这样的设置条款,估计是默认的配置,退出后,就ok了.

  6. mysql5.6 online ddl—索引

    尝试对mysiam表(1500万)删除索引失败 #uk表字段类型比较简单,都是int/tinyint/timestamp类型. CREATE TABLE `uk` (  `id` int(11) NO ...

  7. MySql 安装报错 ：Last Error:Unable to update security. Access denied for user 'root'@'localhost(useing password:YES)

    在网上查了一下,其实这个问题很好解决,. try again 然后current password  mysql是默认密码为空,不要填,记住不要填就ok了

  8. 第二十天File类、字节流

    File类.字节流 File类 File类介绍 File:它是描述持久设备上的文件或文件夹的.只要是在Java程序中操作文件或文件夹肯定需要使用File类完成. File类构造方法 /* * File ...

  9. centos7.2自带的php5.4升级为5.6

    参考:http://jingyan.baidu.com/article/380abd0a1f176c1d91192c4b.html 今天在新购的阿里云上部署个phpmyadmin,结果显示了个如下信息 ...

  10. hdu_1728_逃离迷宫(bfs)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1728 题意:走迷宫,找最小的拐角 题解:对BFS有了新的理解,DFS+剪枝应该也能过,用BFS就要以拐 ...