<!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. 转- 阿里云、Amazon、Google云数据库方案架构与技术分析

    「一切都会运行在云端」. 云时代早已来临,本文着眼于顶级云服务商云服务商的云数据库方案背后的架构,以及笔者最近观察到的一些对于云数据库有意义的工业界的相关技术的进展,希望读者能有所收获. 现在越来越多 ...

  2. 【51nod】1340 地铁环线

    今天头非常疼,躲在家里没去机房 反正都要颓废了,然后花了一上午研究了一下这道神题怎么做-- 题解 首先我们发现,如果我们设\(dis[i]\)为从\(0\)节点走到\(i\)节点的距离 那么题目中给出 ...

  3. 【Java】 String和char[]类型间的相互转化

    (1)String类型转char[] 类型,使用String类型的toCharArray()方法: (2)char[] 类型转String类型,使用String.valueOf()方法: public ...

  4. Java经典设计模式之五大创建型模式

    转载: Java经典设计模式之五大创建型模式 一.概况 总体来说设计模式分为三大类: (1)创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. (2)结构型模式,共七种: ...

  5. NOIP2018游记(退役记。)

    Noip2018游记 这可能是写的最后一篇博客? \(Day0\) 早上六点从学校出发? 早上有雾,在车上扯淡,睡觉. 莫名其妙到了中午,想着午饭怎么解决,后来才知道早上发的四个面包竟然就包括我的午饭 ...

  6. 关联的CURD

    在保存的前面必须先建立好关联.但是默认情况下还是不会自动保存,如果保存会出错. Cascade all所有关联的所有持久化都是级联到另一个对象.保存这个对象的时候关联的对象自动保存. Cascade只 ...

  7. pair 对组

    pair 对组 c++ 基础 2016-05-10 19:42 154人阅读 评论(0) 收藏 举报  分类: 头文件的函数精粹(12)  版权声明:本文为博主原创文章,未经博主允许不得转载. 与关联 ...

  8. UVALive 6907 Body Building

    题目链接:https://vjudge.net/problem/UVALive-6907 题意: 给出一张图,判断这张图中有多少个哑铃,哑铃判断的条件是,对于一个连通图:如果找到一条边连接这两个点的个 ...

  9. Flask请求上下文源码讲解，简单的群聊单聊web

    请求上下文流程图 群聊html代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  10. setResult()的调用时机

    今天遇到这样一个问题,我在Activity-A中用startActivityForResult()方法启动了Activity-B,并且在B中通过setResult()方法给A返回值,由于某些原因不能在 ...