基于zepto或jquery的手机端弹出框成功,失败,加载特效

下载地址: http://download.csdn.net/detail/cometwo/9436014)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
        <title>基于jquery的手机端对话框特效 - 素材家园</title>
        <link rel="stylesheet" type="text/css" href="mdialog.css">
        <style type="text/css">
            input {
                margin: 100px auto;
            }

            input[type="button"] {
                padding: 15px 25px;

            }
        </style>
    </head>

    <body>
        <center>
            <input type="button" id="success" value="成功" />
            <input type="button" id="error" value="错误" />
            <input type="button" id="load" value="正在加载" />
            <input type="button" id="tip" value="提示" />
        </center>

        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="mdialog.js"></script>
        <script type="text/javascript">
            //成功
            $("#success").click(function() {
                new TipBox({
                    setTime: 1500,
                    type: 'success',
                    str: '操作成功',
                    hasBtn: true
                });
            });
            //错误
            $("#error").click(function() {
                new TipBox({
                    type: 'error',
                    str: '对不起,出错了!',
                    hasBtn: true
                });
            });
            //提示
            $("#tip").click(function() {
                new TipBox({
                    type: 'tip',
                    str: '这是提示信息',
                    clickDomCancel: true,
                    setTime: 10000500,
                    hasBtn: true
                });
            });
            //加载
            $("#load").click(function() {
                new TipBox({
                    type: 'load',
                    str: "努力加载中..",
                    setTime: 1500,
                    callBack: function() {
                        new TipBox({
                            type: 'success',
                            str: '操作成功',
                            hasBtn: true
                        });
                    }
                });
            });
        </script>
    </body>

</html>
时间: 2025-01-20 08:57:52

基于zepto或jquery的手机端弹出框成功,失败,加载特效的相关文章

禁止滑动-手机端弹出层弹出时弹出层的内容滚动,同时禁止body内容滚动

问题描述 手机端弹出层弹出时弹出层的内容滚动,同时禁止body内容滚动 最近做的一个项目,手机端的网站,请问弹出层弹出的时候禁止页面底下的body页面内容滚动,但是同时又需要弹出层里面额内容可以滚动,这种效果怎么实现,试过获取页面的scrollTop,然后弹出层出现后给也页面scrollTop()到滑动的位置,但是这种方法在安卓系统上(特别是小米)上运行不流畅,各位同行有没有好的方法可以解决呢? 解决方案 我说下,不知道对不,就是给弹出层下面弄个遮罩层设置为position定位的,宽高都为100

jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)_jquery

功能:zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog,该插件对背景进行遮罩,然后弹出信息显示框,信息显示种类包括: 一.信息种类说明: 1.1.操作成功信息 1.2.错误信息 1.3.警告信息 1.4.通知信息 二.使用说明 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4

jQuery点击按钮弹出遮罩层且内容居中特效_jquery

本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮.一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devic

怎么去掉启动Word2007弹出的配置进度加载项

故障原因以及解决方法如下: 1.打开Word2007时,会弹出Microsoft Office Professional Plus 2007对话框.(或许不同版本的Office2007可能出现的对话框的名字稍有不同,但都会显示出"配置进度"的滚动条.   2.我们只需要找到Office2007的安装目录,打开Office Setup Controller这个文件夹,找到"SETUP.EXE"文件,将它的名字改为"SETUPA.EXE"即可.  

手机-使用bootstrap后jQuery弹出框问题

问题描述 使用bootstrap后jQuery弹出框问题 原来使用的是jQuery的$message.confirm弹出框没有问题,引入bootstrap后,手机端的弹出框会出现一块阴影部分,是怎么回事!如图左上角阴影图片说明 解决方案 使用jQuery弹出层,信息框居中 解决方案二: 你最好贴一下源码 然后看样子很像是div层级 或者是你对应的bt的核心样式版本号 这两个方向看看 解决方案三: 应该是样式的问题,你可以用google chrome在电脑上模拟一下手机客户端,然后分析是不是样式重

jQuery实现气球弹出框式的侧边导航菜单效果_jquery

本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-alt-dlg-left-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUB

四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现  虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们的需求,下面我简单介绍一些 常见的四种提示弹出框(success,loading,error,warning),我分别用原生JavaScript和jQuery来介绍分享给各位博友! 一.首先介绍原生JavaScript来实现四种提示弹出框: 第一步:先看看html的建立 <!DOCTYPE htm

分享两款带遮罩的jQuery弹出框_jquery

第一款:页面遮罩弹出框是最常见的一种状况,用jQuery完成页面遮罩弹出框,主要用的技能有JQuery,css与html.  html代码下列: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"> <p

jQuery+css+html实现页面遮罩弹出框_jquery

页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码 代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"&g