<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Message Box Position - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery.min.js"></script>

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Message Box Position</h2>

    <p>Click the buttons below to display message box on different position.</p>

    <div style="margin:20px 0;">

        <p>

            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="topLeft();">TopLeft</a>

            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="topCenter()">TopCenter</a>

            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="topRight()">TopRight</a>

        </p>

        <p>

            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerLeft()">CenterLeft</a>

            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="center()">Center</a>

            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerRight()">CenterRight</a>

        </p>

        <p>

            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomLeft()">BottomLeft</a>

            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomCenter()">BottomCenter</a>

            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomRight()">BottomRight</a>

        </p>

    </div>

    <script>

        function topLeft(){

            $.messager.show({

                title:'My Title',

                msg:'The message content',

                showType:'show',

                style:{

                    right:'',

                    left:0,

                    top:document.body.scrollTop+document.documentElement.scrollTop,

                    bottom:''

                }

            });

        }

        function topCenter(){

            $.messager.show({

                title:'My Title',

                msg:'The message content',

                showType:'slide',

                style:{

                    right:'',

                    top:document.body.scrollTop+document.documentElement.scrollTop,

                    bottom:''

                }

            });

        }

        function topRight(){

            $.messager.show({

                title:'My Title',

                msg:'The message content',

                showType:'show',

                style:{

                    left:'',

                    right:0,

                    top:document.body.scrollTop+document.documentElement.scrollTop,

                    bottom:''

                }

            });

        }

        function centerLeft(){

            $.messager.show({

                title:'My Title',

                msg:'The message content',

                showType:'fade',

                style:{

                    left:0,

                    right:'',

                    bottom:''

                }

            });

        }

        function center(){

            $.messager.show({

                title:'My Title',

                msg:'The message content',

                showType:'fade',

                style:{

                    right:'',

                    bottom:''

                }

            });

        }

        function centerRight(){

            $.messager.show({

                title:'My Title',

                msg:'The message content',

                showType:'fade',

                style:{

                    left:'',

                    right:0,

                    bottom:''

                }

            });

        }

        function bottomLeft(){

            $.messager.show({

                title:'My Title',

                msg:'The message content',

                showType:'show',

                style:{

                    left:0,

                    right:'',

                    top:'',

                    bottom:-document.body.scrollTop-document.documentElement.scrollTop

                }

            });

        }

        function bottomCenter(){

            $.messager.show({

                title:'My Title',

                msg:'The message content',

                showType:'slide',

                style:{

                    right:'',

                    top:'',

                    bottom:-document.body.scrollTop-document.documentElement.scrollTop

                }

            });

        }

        function bottomRight(){

            $.messager.show({

                title:'My Title',

                msg:'The message content',

                showType:'show'

            });

        }

    </script>

</body>

</html>

Message Box Position的更多相关文章

  1. Wix: Show conditional message box

    For example: Scenario: Show message box only during installation and MYPROPERTY has to be equal to & ...

  2. a message box to confirm the action

    当点击窗口的X按钮时,弹出确认退出消息框,继续点击Yes,退出.否则,窗口继续处于打开状态 代码: """ This program shows a confirmati ...

  3. mint-ui message box 问题；

    当引用 mint-ui message box 的 出现的问题,我暂时是不知道为什么: 官网是这样写的: 于是 我也这么做的:(这里用小写,具体我也不清楚,毕竟文档上写的也不是很清楚,但是只有这样写, ...

  4. message box

    QMessageBox 弹出框上的按钮设置为中文   Qt 默认的弹出框上的按钮式英文,虽然也知道是什么意思,但终究不如中文看着顺眼. QMessageBox box(QMessageBox::War ...

  5. Qt学习笔记-制作一个计算器-对话框Message Box

    在做计算器的前提先做一个加法器. 设计界面. 在点击计算的时候,获取前两个输入框中的数据相加后显示在第三个输入框. toInt是将字符串转换为数字.number静态函数是将数字转化为字符串. 加法器已 ...

  6. vue 结合mint-ui Message box的使用方法

    两种方式使用: 一.全局注册 1.在main.js中引入 //引入 import { MessageBox } from 'mint-ui';   //全局使用,挂载到原型上 Vue.prototyp ...

  7. Win32 error code message

    http://fit.c2.com/fit/files/LispPlatform/lisp/clisp-2.28/src/errwin32.d # Calls a function, passing ...

  8. 模拟position:fixed效果

    大家都知道fixed定位相对于浏览器窗口,下面就介绍一种不用fixed也能实现其效果的定位方法,就那点css代码,这里就直接呼上来: <!DOCTYPE html> <html> ...

  9. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

随机推荐

  1. Ceph 时钟偏移问题 clock skew detected 解决方案--- 部署内网NTP服务

    告警:HEALTH_WARN clock skew detected on mon.ip-10-25-195-6; 8 requests are blocked > 32 sec; Monito ...

  2. hdu 4726(贪心)

    Kia's Calculation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  3. 我所遇到的C++连接问题汇总

    http://blog.sina.com.cn/s/blog_7caa399301017k1e.html 1:无法打开kernel32.lib 针对不同版本的VS,lib库所在的地方都不一样,所以首先 ...

  4. Linux 基础——关机重启命令shutdown、reboot等

    一.关机重启命令的作用 相信对于接触过电脑的人来说,特别是对于windows系统来说,如果长时间使用不经重启的话会出现一点点卡顿的感觉.但是当重启整个系统后,这点点卡顿的感觉好像又没了,重启后wind ...

  5. 常用的scrapy setting

    原文请参考    Scrapy 爬虫入门教程十三 Settings(设置), 讲的很详细 官网参考  Settings 设置 Scrapy 设置允许您自定义所有 Scrapy 组件的行为,包括核心,扩 ...

  6. neo4j中索引的使用

    neo4j可以对node和relationship中的属性建立索引,索引中的node(relationship)和属性对key-value为多对多的关系.一个node(relationship)可以在 ...

  7. quartz定时任务，已过期的内容自动下线

    概念: Quartz是一个开源的作业调度框架,可以让计划的程序任务一个预定义的日期和时间运行.Quartz可以用来创建简单或复杂的日程安排执行几十,几百,甚至是十万的作业数. 框架架构: 简单实例: ...

  8. Arduino可穿戴教程之第一个程序——上传运行程序(四)

    Arduino可穿戴教程之第一个程序——上传运行程序(四) 2.4.5  上传程序 现在所有Arduino IDE的设置都完成了,我们就可以将示例程序上传到板子中了.这非常简单,只需要单击如图2.45 ...

  9. （bc 1001） hdu 6015 skip the class

    Skip the Class Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) T ...

  10. 【BZOJ 4104】 4104: [Thu Summer Camp 2015]解密运算 （智商）

    4104: [Thu Summer Camp 2015]解密运算 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 370  Solved: 237 De ...