仿腾讯微博的一个弹出框 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. 平安某金所奇葩的面经－关于幂等和ROA设计的反思

    在公司一直在做跟支付有关的项目,某日接到平安某金所一男子电话,应该是之前某猎头投的,我正好在吃早饭(也不能怪他们上班早,我们公司弹性工作制,我一般上班比较晚). 因为饭馆信号不好,只能赶紧放下剩下的半 ...

  2. 2014值得期待的Erlang两本新书

    在2014年的开头就有这样一个令人振奋的好消息,Erlang有一本新书即将出版 <The Erlang Runtime System>,其作者happi在2013年3月份发布了这本书的写作 ...

  3. js对象字面量

    在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ),JavaScript也不例外.以 ...

  4. 安卓CTS官方文档之兼容性方案概览

    兼容性方案概览 安卓的兼容性方案让安卓手机生产商能够很容易就开发中可兼容的安卓设备(天地会珠海分舵注:可兼容什么呢?就是可以兼容标准google提供的安卓系统可以支持的功能,以防手机生产商把开源的安卓 ...

  5. AngularJS + CoffeeScript

    AngularJS + CoffeeScript 前端开发环境配置详解 AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全 ...

  6. JavaScript继承基础讲解，原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...

  7. Visual Studio 单元测试之二---顺序单元测试

    原文:Visual Studio 单元测试之二---顺序单元测试 此文是上一篇博文:Visual Studio 单元测试之一---普通单元测试的后续篇章.如果读者对Visual Studio的单元测试 ...

  8. [译]Java 设计模式之备忘录

    (文章翻译来自Java Design Pattern: Memento) memento是一个保存另外一个对象内部状态拷贝的对象.这样以后就可以将该对象恢复到原先保存的状态. 在将来时空旅行将成为显示 ...

  9. Oracle入门4-REF Cursor

    Oracle入门4-REF Cursor 转自:http://blog.sina.com.cn/s/blog_55dbebb00100gxsc.html 自:http://blog.csdn.net/ ...

  10. JS定时跳转URL并输出剩余秒数

    1. [代码][JavaScript]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <scrip ...