当前位置：编程学习 > JS >>

jquery 插件 dialog与tips pop提示效果

jquery 插件 dialog与tips教程 pop提示效果
本文章利用了jquery到dialog插件来做了几种不同效果的dialog与tips pop提示效果实例哦，这种pop tips标题与图片提示效果，超漂亮并且使用简单哦。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.zzzyk.com/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
    <title>jquery 插件 dialog与tips pop提示效果</title>
    <script type="text/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <style type="text/css教程">
    *
    {
      padding:0;
      margin:0;
      font-size:13px;
    }
    a{
      color:#333;
    }
    ul li{
      height:25px;
    }
    /*------- prompt style -------*/
    .popup_prompt{
      border:1px solid #909090;
      background:#fff;
    }
    .popup_prompt .popup_header{

    }
    .popup_prompt h1
    {
      height:25px;
      margin:1px;
      font-size:13px;
      color:#f4793a;
      font-weight:bold;
      text-indent:10px;
      padding-top:7px;
    }
    .popup_prompt .popup_content
    {
      margin:1px;
      padding:10px;
      font-size:13px;
    }
    .popup_prompt .buttonrow
    {
      height:30px;
      line-height:30px;
      text-align:right;
      margin:1px;
    }
    .popup_prompt input
    {
      color:#555;
      border:1px solid #808080;
      margin-right:5px;
      height:20px;
      line-height:18px;
      padding:0px 3px;
    }
    /*------- tip style -------*/
    .popup_tip
    {
      border:1px #684e02 solid;
      vertical-align:middle;
      filter:alpha(opacity=80);
      -moz-opacity:0.8;
    }
    .popup_tip .popup_content
    {
      color:#000;
      background:#fcfbe0;
      text-align:center;
    }
    .popup_tip img
    {
      vertical-align:middle;
    }
    /*------- help style -------*/
    .popup_help_up,.popup_help_down
    {
      width:271px;
      filter:alpha(opacity=85);
    }
    .popup_help_up
    {
      background:url(images/help_t1.gif) left top no-repeat;
    }
    .popup_help_down
    {
      background:url(images/help_t2.gif) left top no-repeat;
    }
    .popup_help_up a:link,.popup_help_down a:link
    {
      text-decoration:underline;
    }
    .popup_help_up .popup_header
    {
      margin-top:9px;
    }
    .popup_help_down .popup_header
    {
      margin-top:22px;
    }
    .popup_help_up .popup_header,.popup_help_down .popup_header
    {
      height:18px;
      border-left:1px #000 solid;
      border-right:1px #000 solid;
      background:#ffffe1;
    }
    .popup_help_up .popup_header h1,.popup_help_down .popup_header h1
    {
      font-size:13px;
      text-indent:28px;
      background:url(images/action.gif) 10px 0px no-repeat;
    }
    .popup_help_up .popup_content,.popup_help_down .popup_content
    {
      line-height:16px;
      padding:5px 10px;
      border-left:1px #000 solid;
      border-right:1px #000 solid;
      background:#ffffe1;
    }
    .popup_help_up .popup_bottom
    {
      height:22px;
      background:url(images/help_b1.gif) left top no-repeat;
    }
    .popup_help_down .popup_bottom
    {
      height:9px;
      background:url(images/help_b2.gif) left top no-repeat;
    }
    </style>
    <script type="text/javascript">
    // jquery dialogs plugin
    // version 1.1
    // cory s.n. laviska (http://abeautifulsite.net/)
    // edit by linpanxing (http://www.91asp教程x.com/)
    //
    (function($) {
        $.popup = {
            id: null,
            title: "",
            top: 0,
            left: 0,
            width: 0,
            height: 0,
            poptype: "",
            repositiononresize: false,          // 窗口调整大小后是否重新定位
            okbutton: '确 定',                  // 确定按钮
            cancelbutton: '取 消',              // 取消按钮
            isbuttonrow: false,                  // 是否显示按钮
            ispopup: false,                      // 是否为popup窗口
            autoclose: 0,                       // 窗口自动关闭 (大于0时窗口自动关闭)

            // 公共方法
            tip: function(msg, top, left, autoclose) {
                this.id = 'tip';
                this.poptype = 'tip';
                this.title = '';
                this.ispopup = false;
                this.autoclose = autoclose || 0;
                this.width = 240;
                this.height = 30;
                this.top = top || ($(document).height() - this.height) / 2;
                this.left = left || ($(document).width() - this.width) / 2;
                $.popup._show(null, msg, null);
            },

            help: function(elem, title, msg, height) {
                this.id = 'help';
                this.title = title || this.title;
                this.width = 271;
                this.height = height || 40;
                var top = $(elem).offset().top;
                if (top - 60 - this.height > 0) {
                    this.top = $(elem).offset().top - 60 - this.height;
                    this.poptype = 'help_up';
                }
                else {
                    this.top = top + 16;
                    this.poptype = 'help_down';
                }
                this.left = $(elem).offset().left - 30;
                $.popup._show(elem, msg);
            },

            prompt: function(elem, title, msg, isbuttonrow, ispopup, callback, top, left, width, height) {
                this.id = 'prompt';
                this.title = title || this.title;
                this.poptype = 'prompt';
                this.isbuttonrow = isbuttonrow || this.isbuttonrow;
                this.ispopup = ispopup || this.ispopup;
                this.top = top || $(elem).offset().top + 16;
                this.left = left || $(elem).offset().left;
                this.width = width || 300;
                this.height = height || 120;
                $.popup._show(elem, msg, function(result) {
                    if (callback) callback(result);
                });
            },

            // 私有方法
            _show: function(elem, msg, callback) {
                if ($("#_popup_" + this.id).length < 1) {
                    //$.popup._hide();
                    var html =
              '<div class="popup_' + this.poptype + '" id="_popup_' + this.id + '" style="width:' + this.width + 'px">
                      <div class="popup_header" id="_title_"><h1>' + this.title + '</h1><div class="h_r"></div></div>
                      <div class="popup_content">
                        <div id="_container_' + this.id + (this.height == 0 ? '">' : '" style="height:' + this.height + 'px">') + msg + '</div></div>' +
                        (this.isbuttonrow ? '<div class="buttonrow" id="_buttonrow_' + this.id + '"></div>' : '') +
                      '<div class="popup_bottom"><div class="b_r"></div>
                    </div>';

                    $("body").append(html);

                    // ie6 fix
                    //var pos = ($.browser.msie && parseint($.browser.version) <= 6) ? 'absolute' : 'fixed';

                    $("#_popup_" + this.id).css({
                        position: 'absolute',
                        zindex: 100,
                        padding: 0,
                        margin: 0
                    });

                    $("#_popup_" + this.id).css({
                        minwidth: $("#_popup_" + this.id).outerwidth(),
                        maxwidth: $("#_popup_" + this.id).outerwidth()
                    });

                    $.popup._reposition();
                    $.popup._maintainposition(true);

                    $.popup._bindtype();

                    // popup 窗口方法待测试
                    if (this.ispopup) {
                        $(elem).click(function(e) {
                            e ? e.stoppropagation() : event.cancelbubble = true;
                        });
                        $("#_popup_" + this.id).click(function(e) {
                            e ? e.stoppropagation() : event.cancelbubble = true;
                        });
                        $(document).click(function() {
                            $.popup._hide();
                        });
                    }

                    if (this.autoclose > 0) {
                        $.popup._autoclose();
                    }
                }
                else {
                    $("#_container_" + this.id).html(msg);
                    $.popup._bindtype(callback);
                    $.popup._reposition();
                    $.popup._maintainposition(true);
                    $("#_popup_" + this.id).show();
                    if (this.autoclose > 0) {
                        $.popup._autoclose();
                    }
                }
            },

            _bindtype: function(callback) {
                switch (this.poptype) {
                    case 'help':
                        if (this.isbuttonrow) {
                            $("#_buttonrow_" + this.id).after('<input type="button" value="' + $.popup.okbutton + '" id="_buttonok_' + this.id + '" />');
                            $("#_buttonok_" + this.id).click(function() {
                                $.popup._hide();
                                callback(true);
                            });
                            $("#_buttonok_" + this.id).keypress(function(e) {
                                if (e.keycode == 13 || e.keycode == 27) $("#_buttonok_" + this.id).trigger('click');
                            });
                        }
                        break;
                    case 'prompt':
                        if (this.isbuttonrow) {
                            $("#_buttonrow_" + this.id).html('<input type="hidden" id="hid_' + this.id + '" />
                            <input type="button" value="' + $.popup.okbutton + '" id="_buttonok_' + this.id + '"/>
                            <input type="button" value="' + $.popup.cancelbutton + '" id="_buttoncancel_' + this.id + '"/>');
                            $("#_buttonok_" + this.id).click(function() {
                                var val = $("#hid_" + this.id).val();
                                $.popup._hide();
                                if (callback) callback(val);
                            });
                            $("#_buttoncancel_" + this.id).click(function() {
                                $.popup._hide();
                                if (callback) callback(null);
                            });
                            $("#_buttonok_" + this.id + ", #_buttoncancel_" + this.id).keypress(function(e) {
                                if (e.keycode == 13) $("#_buttonok_" + this.id).trigger('click');
                                if (e.keycode == 27) $("#_buttoncancel_" + this.id).trigger('click');
                            });
                        }
                        break;
                    case 'tip':
                        break;
                    default:
                        break;
                }

            },

            _hide: function() {
                if ($("#_popup_" + this.id).length > 0) {
                    if (this.poptype == "tip") {
                        $("#_popup_" + this.id).fadeout(500);
                    }
                    else {
                        $("#_popup_" + this.id).remove();
                    }
                    $.popup._maintainposition(false);
                }
            },

            _autoclose: function() {
                settimeout("$.popup._hide()", this.autoclose * 1000);
            },

            _reposition: function() {
                var top = this.top || (($(document).height() / 2) - ($("#popup_container").outerheight() / 2));
                var left = this.left || (($(document).width() / 2) - ($("#popup_container").outerwidth() / 2));
                if (top < 0) top = 0;
                if (left < 0) left = 0;
                // ie6 fix
                //if ($.browser.msie && parseint($.browser.version) <= 6) top = top + $(window).scrolltop();
                $("#_popup_" + this.id).css({
                    top: top + 'px',
                    left: left + 'px'
                });
            },

            _maintainposition: function(status) {
                if ($.popup.repositiononresize) {
                    switch (status) {
                        case true:
                            $(window).bind('resize', $.popup._reposition);
                            break;
                        case false:
                            $(window).unbind('resize', $.popup._reposition);
                            break;
                    }
                }
            }

        }

        // 显示loading信息
        showloading = function(msg, elem) {
            var loadingmsg = msg || '正在加载数据，请稍候...';
            if (elem == null) {
                $.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                    '<td align="center"><img src="images/loading.gif" /> ' + loadingmsg + '</td></tr></table>', null, null, 0);
            } else {
                var middle = ($(elem).height() - 30) / 2;
                var top = $(elem).offset().top + (middle > 0 ? middle : 0);
                $.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                     '<td align="center"><img src="images/loading.gif" /> ' + loadingmsg + '</td></tr></table>', top, null, 0);
            }
        }
        hidetip = function() {
            $("#_popup_tip").fadeout(500);
        }
        showtip = function(msg, elem, autoclose) {
            if (elem == null) {
                $.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                    '<td align="center">' + msg + '</td></tr></table>', null, null, autoclose);
            } else {
                var middle = ($("#" + elem).height() - 50) / 2;
                var top = $("#" + elem).offset().top + (middle > 0 ? middle : 0);
                $.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                    '<td align="center">' + msg + '</td></tr></table>', top, null, autoclose);
            }
        }
        showhelper = function(elem, title, msg, height) {
            $.popup.help(elem, title, msg, height);
        }

        showprompt = function(elem, title, msg, isbuttonrow, ispopup, callback, top, left, width, height) {
            $.popup.prompt(elem, title, msg, isbuttonrow, ispopup, callback, top, left, width, height);
        }

    })(jquery);
    </script>
</head>

<body>
<div style="width:800px;margin:50px auto;">
<h3 style="height:30px;">jquery通用dialog/popup窗口插件</h3>
  <ul>
    <li><a id="h01" href="#" onmouseo教程ver="showhelper('#h01', '帮助主题', '多个tag标签用半角逗号隔开',30)" onmouseout="$('#_popup_help').remove()" title="查看帮助">帮助窗口（根据位置自动判断在底下弹出）</a></li>
    <li><a id="h02" href="#" onmouseover="showhelper('#h02', '帮助主题', '多个tag标签用半角逗号隔开',30)" onmouseout="$('#_popup_help').remove()" title="查看帮助">帮助窗口（根据位置自动判断在头部弹出）</a></li>
  </ul>
  <ul>
    <li><a id="h11" href="javascript:showloading()" title="查看帮助">显示loading信息（默认）</a>    <a href="javascript:hidetip()">隐藏loading信息</a></li>
    <li><a id="h12" href="javascript:showloading('正在提交数据...')">显示自定义loading信息（默认）</a>    <a href="javascript:hidetip()">隐藏loading信息</a></li>
    <li><a id="h13" href="javascript:showloading('正在加载列表数据...','#h13')">在指定容器内显示loading信息（默认）</a>    <a href="javascript:hidetip()">隐藏loading信息</a></li>
    <li><a id="h14" href="javascript:showtip('发表成功，经验 + 5')">显示提示信息</a>    <a href="javascript:hidetip()">隐藏tip信息</a></li>
    <li><a id="h15" href="javascript:showtip('回复成功，经验 + 1',null,1)">显示提示信息（自动隐藏）</a></li>
  </ul>
  <ul>
    <li><a id="h21" href="javascript:showprompt('#h21', '对话框', '自定义显示内容','callback')" title="查看帮助">对话框</a></li>
  </ul>       
</div>
</body>

</html>


源码下载地址
http://down.zzzyk.com/down/code/jquery/2010/0929/20991.html
效果预览地址
http://g.226511.cn/javascript/code/20100929/jqpop/

补充：网页制作,jquery

上一个：jquery 音乐播放器效果插件 jPlayer源码
下一个：收藏三款jquery实现折叠菜代码

更多图片编程知识:
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。
JS怎样操作PHP中的参数
js 怎么在一打开页面就加载这个函数。
Date.parse()的问题(js)
<script src="/{maxcms:sitepath}js/common.js"></script>是什么意思
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
如果你遇到编程学习难题：
请访问www.zzzyk.com 试试
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络，