<!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. hdu 5894(组合数取模)

    hannnnah_j’s Biological Test Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K ...

  2. Node.js fs-文件系统

    fs.stat,获取文件信息. var fs = require('fs') fs.stat('../index.js', (err, stats) => { if (err) { consol ...

  3. [你必须知道的.NET]第二十一回：认识全面的null

    发布日期:2008.7.31 作者:Anytao © 2008 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. 说在,开篇之前 null.nullable.??运算符.null ...

  4. LoadRunner的Capture Level说明

    LoadRunner的Capture Level说明 Capture Level的设置说明: 1.Socket level data. Capture data using trapping on t ...

  5. centos7 时间同步

    yum -y install ntp systemctl enable ntpd systemctl start ntpd ntpdate -u cn.pool.ntp.org

  6. Window 下一台机器配置三个Tomcat实例

    下面我们把配置的详细过程写在下面,以供参考:(此例以配置三个Tomcat为例) 1. 下载apache-tomcat-8.0.63,下载下来的文件为apache-tomcat-8.0.63.zip. ...

  7. Socket 异步

    摘要: System.Net.Sockets.Sockte 类有一组增强功能,提供可供专用的高性能套接字应用程序使用的可选异步模式,SocketAsyncEventArgs 类就是这一组增强功能的一部 ...

  8. thinkphp5.0独立配置

    独立配置文件 新版支持配置文件分离,只需要配置extra_config_list参数(在应用公共配置文件中). 例如,不使用独立配置文件的话,数据库配置信息应该是在config.php中配置如下: / ...

  9. fastadmin iframe 表单提交之后跳转

    controller 对应的那个js文件中添加: define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function($, und ...

  10. 洛谷P4171 [JSOI2010] 满汉全席 [2-SAT，Tarjan]

    题目传送门 满汉全席 题目描述 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉 ...