仿腾讯微博的一个弹出框 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 中的异常处理 问题 在开发过程中,异常处理算是比较常见的问题了. 举一个比较常见的例子:用户修改注册的邮箱,大概分为以下几个步骤: 接收到一个用户的请求:我要修改邮箱地址 ...

  2. Socket 由浅入深系列--------- 简单实现编程（三）

    socket 由浅入深 原理(一)介绍了一些,以下也就是简单实现,并未考虑其它性能化! 使用TCP的server客户机举例 server 设置一个简单的TCPserver涉及下列步骤: 调用 sock ...

  3. WebBrowser控件的简单应用2

    原文:WebBrowser控件的简单应用2 第一个简单应用里面讲述的是如何模拟调用当前网页的元素的事件或者赋值/取值.这次的应用讲述的是1:如何处理弹出新页面的事件(总是在我的浏览器里面现实新页面)2 ...

  4. 10. IDENTITY属性使用小结

    原文:10. IDENTITY属性使用小结 从SQL Server 2012开始有了Sequence,简单用列如下: CREATE SEQUENCE TestSeq START INCREMENT ; ...

  5. Caused by: java.lang.ClassNotFoundException: org.dom4j.DocumentException

    1.错误描写叙述 信息: Initializing c3p0-0.9.2.1 [built 20-March-2013 10:47:27 +0000; debug? true; trace: 10] ...

  6. 【solr这四个主题】在Tomcat 部署Solr4.x

    1.安装Tomcat (1)下载并解压缩到/opt/tomcat在 # cd /opt/jediael # tar -zxvf apache-tomcat-7.0.54.tar.gz # mv apa ...

  7. 使用 COM 风格的编程接口

    使用COM 风格的编程接口 假设不直接使用 COM 库.不创建自己的包装.那么更可能的是使用 COM 风格的编程接口.这是由于如今很多开发商公布应用程序时.提供了首选的互操作程序集(Primary I ...

  8. （64位oracle使用32位的PLSQL）安装64位的oracle数据库软件，使用32位的PLSQL Developer连接方法

    因为PLSQL Developer没有提供64位的,于是依据网上的资料做了一下整理,发上来 1.下载并安装Oracle 11g R2 64位,在server上安装时忽略硬件检測失败信息: 2.下载Or ...

  9. Cocos2d-x3.0 Json解析

    2dx3.0下一个JSON解析库官员以及集成.我们参考一下吧OK. JSON文件hello.json内容 {"pets":["dog","cat&qu ...

  10. Spring之SpringMVC(源码)初始化DispatcherServlet策略配置

    1.从上一篇文章中可以SpringMVC初始化的过程中完成的其中一件事就是DispatcherServlet的相关策略的配置,如下所示 protected void initStrategies(Ap ...