zoukankan      html  css  js  c++  java
  • jQuery插件(右下角弹出窗口)

    原文发布时间为:2010-03-07 —— 来源于本人的百度文章 [由搬家工具导入]

    jQuery插件(右下角弹出窗口) 收藏
    源码下载

    http://download.csdn.net/source/858698

    使用方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery 插件 plugin 消息插件--亮亮的博客</title>
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="jquery.messager.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $.messager.show(0,'送你一个Jquery Messager消息弹出插件!');
        $("#showMessager300x200").click(function(){
            $.messager.lays(300, 200);
            $.messager.show(0, '300x200的消息',60000);
        });
        $("#showMessagerFadeIn").click(function(){
            $.messager.anim('fade', 2000);
            $.messager.show(0, 'fadeIn动画消息');
        });
        $("#showMessagerShow").click(function(){
            $.messager.anim('show', 1000);
            $.messager.show(0, 'show动画消息');
        });
        $("#showMessagerDim").click(function(){
            $.messager.show('<font color=red>自定义标题</font>', '<font color=green style="font-size:14px;font-weight:bold;">自定义内容</font>');
        });
        $("#showMessagerSec").click(function(){
            $.messager.show(0, '一秒钟关闭消息', 1000);
        });
    });
    </script>
    <style type="text/css">
    <!--
    body,td,th { font-size: 12px; }
    body { background-color: #fefefe; }
    p   { 80%; height:auto; padding:10px; background-color:#D6F097; border:solid 1px #FF9900; color:#333; margin-left:auto; margin-right:auto;}
    input   { background-color:#F5D99E; color:#333; border:solid 1px #993300; font-size:12px;}
    -->
    </style></head>

    <body>
    <h2>JQUEYR PLUGIN - Messager 作者:赵戈</h2>
    <p><input type="button" id="showMessager300x200" value="显示一个300x200的消息" /></p>
    <p><input type="button" id="showMessagerFadeIn" value="显示一个fadeIn动画消息" /></p>
    <p><input type="button" id="showMessagerShow" value="显示一个show动画消息" /></p>
    <p><input type="button" id="showMessagerDim" value="显示定义内容和标题消息" /></p>
    <p><input type="button" id="showMessagerSec" value="一秒钟关闭消息" /></p>
    <br /><br />
    <a href="http://www.94this.com.cn/article/241.htm">代码下载</a>
    </body>
    </html>


    Jquery.Messager插件

    右下角弹出窗口

    1.关于页面过长,弹出页面无法在右下角
    var topHeight = document.documentElement.scrollTop + document.documentElement.clientHeight – this.layer.height;

    top:topHeight +”px” 就可以解决

    2. 不随鼠标下移
    $(window).scroll( function() {
    var topHeight = document.documentElement.scrollTop + document.documentElement.clientHeight – this.layer.height;
    $(”#message”).css(”top”,topHeight+”px”);
    });
    就可以解决

    DEMO 下载

  • 相关阅读:
    axios取消请求
    echarts常用图表配置
    Vue指令限制输入框输入整数小数
    小程序商品飞入购物车组件
    webpack按测试和生产环境进行编译
    地图画线添加标签
    vue-element-admin 动态侧边栏
    html2canvas 和浏览器打印
    echarts 指定某段曲线颜色
    列出表结构
  • 原文地址:https://www.cnblogs.com/handboy/p/7158386.html
Copyright © 2011-2022 走看看