仿腾讯微博的一个弹出框 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. 讨论IT选定的技术招聘企业几点

    在实际的招聘总结的几点思考,企业需要怎么样的人才,例如,以下个人总结: 1.技术能力是不是第一次 企业的时候,你往往看第一点的人的招聘是不是技术实力.但是,你的个人言论的行为和态度.能在半个小时内把你 ...

  2. SOA一些资料

    SOA相关资料整理分享 2015-03-26 16:16 by 蘑菇先生, 693 阅读, 9 评论, 收藏, 编辑 昨@幸福框架同学问能否推荐SOA一些资料.想想之前看过不少资料文档,就整理分享下. ...

  3. Oracle Data Provider for .NET now on NuGet

    Oracle Data Provider for .NET now on NuGet 时间 2015-03-02 22:30:00  Oracle Bloggers原文  http://cshay.b ...

  4. 6、Cocos2dx 3.0游戏开发的基本概念找个小三场比赛

    重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27689713 郝萌主友情提示: 人是习惯的产物,当你 ...

  5. MVC验证05-自定义验证规则、验证2个属性值不等

    原文:MVC验证05-自定义验证规则.验证2个属性值不等 本文体验2个属性值不等.即当一个属性输入值,另外一个属性输入的值不能和第一个属性值相等.相关文章包括: MVC验证01-基础.远程验证   M ...

  6. SQL 无限级分类语句

    原文:SQL 无限级分类语句 原表数据为: 此处用到了with关键字,在程序中也可以用递归实现,但觉得还是没有一条sql方便 with tb (ID,Name,ParentID,Sort) as( s ...

  7. asp.net web api2.0 ajax跨域解决方案

    asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种.  一,ASP.NET Web API支持JSONP,分两种 1, ...

  8. SSH六部曲

    <strong> 一共有6步(文章底部附有源码下载地址,刚学完ssh的可以借鉴)</strong> 1 写一个Hibernate应用,完成用户的增加 1) User实体 2)U ...

  9. Android学习笔记：Home Screen Widgets（1）：大约Widget

    什么是Home Screen Widgets Home screen Widget即称为小工具或者中文小工具,是显示在主页上的views,通过后台进程更新view的数据. Android由AppWid ...

  10. TestNg的xml配置

    TestNG中,可以通过配置xml来运行某一类.包.方法. 1.通过TestNg运行某一个类 <?xml version="1.0" encoding="UTF-8 ...