<!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. 二维离散平稳小波分解swt2

    对信号X进行N尺度平稳小波分解 [A,H,V,D]=swt2(X,N,'wname'); clc,clear all,close all; load woman; [cA,cH,cV,cD]=swt2 ...

  2. shell脚本学习（三）

    1.在grep中, ^标记着单词的开始, $ 标记着单词的结束. 查看一个单词是否在linux自带的词典中,脚本如下: #bin/sh #文件名:checkword.sh word=$1 grep & ...

  3. ubuntu 14.04 32位库

    如果是ubuntu 14.04,则请先执行: 方法1: sudo gedit /etc/apt/sources.list 然后在最后添加上: deb http://archive.ubuntu.com ...

  4. 【Loadrunner】初学Loadrunner——录制脚本、回放、以及优化

    一.脚本录制(录制) 打开Loadrunner > 选择创建/编辑脚本 > NewScript > 选择协议(单协议.多协议) > Strart Recording >选 ...

  5. NYOJ-1036 非洲小孩（贪心）

    非洲小孩 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 家住非洲的小孩,都很黑.为什么呢?第一,他们地处热带,太阳辐射严重.第二,他们不经常洗澡.(常年缺水,怎么洗 ...

  6. CVE-2014-1767 漏洞分析(2015.1)

    CVE-2014-1767 漏洞分析 1. 简介 该漏洞是由于Windows的afd.sys驱动在对系统内存的管理操作中,存在着悬垂指针的问题.在特定情况下攻击者可以通过该悬垂指针造成内存的doubl ...

  7. Compile Time Assertion..

    The most seen assertion are during runtime, but this one is at compile time, to give the error more ...

  8. linux下修改MAC地址方法

    一.修改MAC地址方法linux环境下:需要用 #ifconfig eth0 down 先把网卡禁用 再用ifconfig eth0 hw ether 1234567890ab 这样就可以改成功了要想 ...

  9. Moss列表查询，删除条目，更新条目。

    基于Query语句的列表查询 function retrieveListItems(itemId) {    var siteUrl=_spPageContextInfo.webServerRelat ...

  10. php编译错误Note that the MySQL client library is not bundled anymore!

    Note that the MySQL client library is not bundled anymore! 解决方法. 1. 查看系统有没有安装mysql header find / -na ...