仿腾讯微博的一个弹出框 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. android studio 添加到项目库中的项目

    工程-对-new module-Android Library-module name和package name 它应该在同一个库被引入. 然后在该文件夹replace新的library 在gradl ...

  2. 如何为你的初创应用App开发公司建立战略计划(商业战略竞争五力学)

    首先,什么是战略计划?战略计划可以定义为一个为了达到目标而需要执行的一系列动作步骤的计划. 根据当今全球第一战略权威,商业管理界公认的"竞争战略之父"Michael Porter著 ...

  3. 日积月累系列之国籍控件（js源码）

    一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件,navtionalit ...

  4. java设计模式之六适配器模式(Adapter)

    适配器模式将某个类的接口转换成客户端期望的另一个接口表示,目的是消除由于接口不匹配所造成的类的兼容性问题.主要分为三类:类的适配器模式.对象的适配器模式.接口的适配器模式.首先,我们来看看类的适配器模 ...

  5. UiAutomator源码分析之获取控件信息

    根据上一篇文章<UiAutomator源码分析之注入事件>开始时提到的计划,这一篇文章我们要分析的是第二点: 如何获取控件信息 我们在测试脚本中初始化一个UiObject的时候通常是像以下 ...

  6. 从零开始学习jQuery(剧场版) 你必须知道的javascript

    原文:从零开始学习jQuery(剧场版) 你必须知道的javascript 一.摘要 本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascri ...

  7. Kafka spring 集成

    下载配置kafka参考该链接:http://www.cnblogs.com/super-d2/p/4534323.html pom.xml: <dependency> <groupI ...

  8. js判断浏览器类型（手机和电脑终端）

    工作中经常会用到通过js来判断浏览器的功能!今天这里通过js来判断浏览器是来自移动设备还是pc设备! 代码如下: var browser={ versions:function(){ var u = ...

  9. SQL Server 2005同步复制

    原文:SQL Server 2005同步复制 以下实现复制步骤(以快照复制为例) 运行平台SQL SERVER 2005 一.准备工作: 1．建立一个 WINDOWS 用户,设置为管理员权限,并设置密 ...

  10. css优先级汇总

    原文:css优先级汇总 我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴 ...