<!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. Bootstrap介绍

    Bootstrap是基于HTML.CSS和JavaScript开源的前端开发工具包. 1.响应式布局: 效果:根据浏览器的宽度来调整页面布局. 例如: <html lang="en&q ...

  2. jbpm4.3表结构和表字段说明

    整体说明: JBPM4_DEPLOYMENT   流程定义表JBPM4_DEPLOYPROP 流程定义属性表 JBPM4_EXECUTION  流程实例表JBPM4_HIST_ACTINST 流程活动 ...

  3. 关于开启url的pathinfo模式

    1.apache要开启pathinfo模式,需要在 <Directory /> Options +Indexes +FollowSymLinks +ExecCGI AllowOverrid ...

  4. 使用Idea作为go的IDE

    Idea是一款非常不错的IDE,只可惜是收费的.Idea可以使用很多的插件,当然里面就包含我们需要的go语言的插件. 1.我们打开file -> Settings -> Plugins - ...

  5. linux nfs开启

    nfs设置: NFS的配置过程很简单.在服务器端中编辑/etc/exports文件,添加如下内容:     /home/cotton/data/cotton/zghy 192.168.2.*(rw,s ...

  6. 12C dbca silent

    dbca needs a template file to create a database. These template can be found in $ORACLE_HOME/assista ...

  7. php 生成json格式的数据

    放到引入的公共函数里边 if (!function_exists('format_json')) { /** * 格式化API输出的json * @param $return_code string ...

  8. OC工程调用Swift方法

    1.建一个OC工程命名为SwiftOC.如图所示: 2.新建一个swfit文件命名为Test.swift,会弹出提示,选择Create Bridging Header建立桥接文件,系统会建立“工程名- ...

  9. PAT 天梯赛 L2-007 家庭房产

    建图+DFS 题目链接:https://www.patest.cn/contests/gplt/L2-007 题解 在热身赛的时候没有做出来,用的并查集的思想,但是敲残了,最后也没整出来.赛后听到别人 ...

  10. 转 s3c2440硬件学习----内存管理单元MMU

    本篇基本是韦东山书上的 一.内存管理单元MMU介绍 内存管理单元简称MMU,它负责虚拟地址到物理地址的映射,并提供硬件机制的内存访问权限检查.MMU使得每个用户进程拥有自己独立的地址空间,并通过内存访 ...