<!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. Unity5系列资源管理AssetBundle——加载

    上次我们进行了AssetBundle打包,现在我们还把打包的资源加载到我们的游戏中.在加载之前,我们需要把打包好的Bundle包裹放到服务器上,如果没有,也可以使用XAMPP搭建本地服务器. 加载的A ...

  2. FZU 1920 Left Mouse Button 简单搜索

    题意就是扫雷 问最少多少次可以把图点开…… 思路也很明显 就是先把所有的标记一遍 就当所有的都要点…… 录入图…… 所有雷都不标记…… 之后呢 遍历图…… 然后碰到0就搜索一圈 碰到数字就标记…… 不 ...

  3. poj 1411 Calling Extraterrestrial Intelligence Again

    题意:给你数m,a,b,假设有数p,q,满足p*q<=m同时a/b<=p/q<=1,求当p*q最大的p和q的值 方法:暴力枚举 -_-|| and 优化范围 我们可以注意到在某一个m ...

  4. CSS，height:auto和height:100%有什么区别？

    auto是随内容的高度而撑开的.100%是根据父级元素的高度来决定的.例如:<div style="height:100px;width:200px;"> <di ...

  5. Tyvj-TOM的无穷序列

    背景 蛟川书院模拟试题 描述 TOM有一个无穷序列中如下:110100100010000100000.....请你帮助TOM找出在这个无穷序列中指定位置上的数字 输入格式 第一行一个正整数N,表示询问 ...

  6. unity 退到桌面的 OnApplicationPause

    void OnApplicationFocus( bool isFocus ) { // Debug.Log("--------OnApplicationPause---" + i ...

  7. OpenStack回顾随笔（第一章）

    1. OpenStack历史    OpenStack前身是NASA和Rackspace合作的项目,2010年开源,与其他主流开源云管理系统:Citrix的Cloudstack和桉树的OpenNebu ...

  8. 【CRC校验】学习笔记

    #include<stdio.h> unsigned ]= { 0x01,0x02,0x03,0x04,0x05,0x06 }; ] = { 0x0000, 0x1021, 0x2042, ...

  9. 全排列dfs算法

    如下 #include <iostream> using namespace std; #define MAX 10 #define _CRT_SECURE_NO_WARNINGS int ...

  10. js 鸭式辨型法

    无意中看到arr.length === +arr.length;这句代码,然后就去了解了下 这是一种鸭式辨型的判断方法. 鸭式辨型:像鸭子一样走路.游泳和嘎嘎叫的鸟就是鸭子 这句话表示: a.arr有 ...