仿腾讯微博的一个弹出框 v0.1 beta

 

代码写的不太好，新手请大家海涵，只为博君一笑，勿放在心上。

写在这里留作纪念，也许以后用的到。

效果

CSS

.prompt{

    position: absolute;

    background: white;

    width: 330px;

    height: 187px;

    display: none;

}

.prompt i{

    background: url(../images/ui_i_pic_.png) no-repeat;

    width: 32px;

    height: 32px;

    display: block;

    float: left;

    margin-right: 10px;

}

.prompt span{

    font-size: 14px;

    font-weight: bold;

    line-height: 32px;

}

.prompt .ok{

    background: url(../images/button_03.gif) no-repeat;

    color: white;

    clear: left;

}

.prompt .cancel{

    background: url(../images/button_05.gif) no-repeat;

    color: black;

    margin-left: 10px;

}

.prompt a{

    float: left;

    font-size: 12px;

    width: 65px;

    height: 23px;

    display: block;

    line-height: 23px;

    text-decoration: none;

    text-align: center;

}            

.prompt .buttons{

    margin: 50px 0 0 42px;

}

.prompt b{

    position: absolute;

    background: black;

    opacity: 0.2;

}

.prompt .left{

    left: 0;

    top: 4px;

    height: 179px;

    width: 4px;

}

.prompt .top{

    top: 0;

    height: 4px;

    width: 330px;

}

.prompt .right{

    right: 0;

    top: 4px;

    height: 179px;

    width: 4px;

}

.prompt .bottom{

    bottom: 0;

    height: 4px;

    width: 330px;

}

.prompt .warning{

    background-position: -34px 0;

}

.prompt .success{

    background-position: 0 0;

}

.prompt .information{

    background-position: -68px 0;

}

.prompt .inner{

    margin: 40px 60px 40px;

}

JS

(function ($) {

    $.extend({

        prompt: function (text, type, ok, cancel) {

            var prompt = $('<div class="prompt"><b class="left"></b><b class="right"></b><b class="top"></b><b class="bottom"></b><div class="inner"><i class=" + type + "></i><span>' + text + '</span><div class="buttons"><a class="ok" href="#">是</a><a class="cancel" href="#">否</a></div></div></div>').appendTo('body');

            prompt.css({

                left: ($(window).width() - prompt.width()) / 2,

                top: ($(window).height() - prompt.height()) / 2

            }).show();

            prompt.find('.ok').bind('click', ok);

            prompt.find('.cancel').bind('click', cancel);

            return prompt;

        }

    });

})(jQuery);

HTML和使用方法

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

        <script type="text/javascript" src="js/prompt.t.qq.com.min.js"></script>

        <link rel="stylesheet" type="text/css" href="css/prompt.t.qq.com.min.css" />

        <style type="text/css">

            body{

                margin: 0;

                padding: 0;

            }

            .content{

                width: 960px;

                margin: 0 auto;

                margin-top: 200px;

            }

        </style>

        <script type="text/javascript">

            $(function () {

                $('a').click(function () {

                    var prompt = $.prompt('您确定放弃本次编辑？', 'information', function () {

                        alert('您点击了确定按钮');

                    }, function () {

                        prompt.fadeOut(function () {

                            prompt.remove();

                        });

                    });

                });

            });

        </script>

    </head>

    <body>

        <div class="content">

            <textarea style="width: 500px;height: 200px;"></textarea>

            <a href="#" style="display: block;">点击我出现窗口</a>

        </div>

    </body>

</html>

参数1 显示内容

参数2 图标类型 information success warning

参数3 点击[是]的事件

参数4 点击[否]的事件

代码在此,供上,希望能帮助大家.

IE的透明度使用filter:alpha(opacity=xx),我没写IE的直接用了chrome的opacity，有空我再加上，希望您使用的时候要注意兼容IE。

点此下载

仿腾讯微博的一个弹出框 v0.1 beta的更多相关文章

  1. Bootstrap方法为页面添加一个弹出框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. vue.js 利用组件之间通讯，写一个弹出框例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. android中怎么把自己须要的app启动图标集中到一个弹出框中

    先看效果图 这个是我们自己的apk点击之后的效果 下边是布局文件 activity_main.xml主布局文件 <LinearLayout xmlns:android="http:// ...

  4. 移动web：Tips消息弹出框

    在web开发中经常会用到像alert这样的弹出消息,每个浏览器自带的消息弹出框都不相同.为了统一外观,实现自定义的功能,动手写一个弹出框插件. 对弹出框的实现要求如下: 1. 仿照IOS系统弹出外观 ...

  5. 弹出框优化实例（alert和confirm）

    在项目过程中会遇到需要使用自己定义的弹出框的情况.以前用过ymprompt,但是它太复杂而且不好自己操控.所以自己写了一个弹出框实例. 主要有两类弹出框alert和confirm.基于jQuery a ...

  6. Bootstrap 弹出框和警告框插件

    一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type=" ...

  7. Android 学习笔记之AndBase框架学习(二) 使用封装好的进度框，Toast框，弹出框，确认框...

    PS:渐渐明白,在实验室呆三年都不如在企业呆一年... 学习内容: 1.使用AbActivity内部封装的方法实现进度框,Toast框,弹出框,确认框...   AndBase中AbActivity封 ...

  8. android自定义弹出框样式实现

    前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...

  9. 练习PopupWindow弹出框之实现界面加载的时候显示弹出框到指定的view下面--两种延迟方法

    今天在练习PopupWindow弹出框的时候,打算在界面加载的时候将弹出框展现出来并显示在指定的view下面. 初步方法是直接在OnResume方法里面直接执行showPopupWindows方法. ...

随机推荐

  1. Swift语言指南(一)--语言基础之常量和变量

    原文:Swift语言指南(一)--语言基础之常量和变量 Swift 是开发 iOS 及 OS X 应用的一门新编程语言,然而,它的开发体验与 C 或 Objective-C 有很多相似之处. Swif ...

  2. 我所理解的Spring AOP的基本概念

    Spring AOP中的概念晦涩难懂,读官方文档更是像读天书,看了非常多样例后,写一些自己理解的一些spring的概念.要理解面向切面编程,要首先理解代理模式和动态代理模式. 如果一个OA系统中的一个 ...

  3. addEventListener

    addEventListener addEventListener-开始 前面零散地写了些关于 addEventListener 的内容,觉得比较散,有些地方可能也说得不够清楚明白,所以决定以连载的形 ...

  4. .NET开源项目 TOP 25

    .NET开源项目 TOP 25 如果知道.NET项目在开源中国的git上所占的比重只有5%的话,为什么这个<2014年国人开发的最热门的开源软件TOP 100>榜中.NET项目那么少就是情 ...

  5. C#中使用REDIS

    C#中使用REDIS 上一篇>> 摘要 上一篇讲述了安装redis客户端和服务器端,也大体地介绍了一下redis.本篇着重讲解.NET4.0 和 .NET4.5中如何使用redis和C# ...

  6. APP-随身听

    简单到复杂听你的专属音响界,听金融.听物业,听新闻和其他节目专辑,简要介绍了新的音频应用,给你不一样的聆听体验.还记得老歌做?这里有.您留声机的一部分!很简单的音频应用,随时随地与此应用程序来听你的私 ...

  7. navigator，JS检测浏览器插件

    最早由Netscape Navigator 2.0引入的navigator对象,现在已经成为识别客户端浏览器的事实标准.虽然其它浏览器也通过其它方式提供了相同或相似的信息(例如,IE中的window. ...

  8. Hadoop -YARN 应用程序设计概述

    一概述        应用程序是用户编写的处理数据的统称,它从YARN中申请资源完毕自己的计算任务.YARN自身相应用程序类型没有不论什么限制,它能够是处理短类型任务的MapReduce作业,也能够是 ...

  9. jQuery圆形统计图实战开发

    今天我给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便. 首先我们需要将jquery库文件和jqu ...

  10. 摘录DirectShow数据，视频采集

    DirectShow在,数据流(Data Flow)它们是依次流过每Filter的.管理其数据具有其自己的方法,并且并没有向用户提供一个统一的接口,供用户操作数据流.这里以提取视频採集在的每帧为位图数 ...