<!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. vue引入自己写的js文件

    话不多说,直接上代码呀~ 先来个结构图: 中规中矩的vue-cli就写了一个自己的js文件 那么我想要引入到vue组件里. 1.首先写我的js文件 2.引入到vue组件!!!一定要用{}把方法名拿过来 ...

  2. ref:Web Service 渗透测试从入门到精通

    ref:https://www.anquanke.com/post/id/85910 Web Service 渗透测试从入门到精通 发布时间:2017-04-18 14:26:54 译文声明:本文是翻 ...

  3. 429.N叉树的层次遍历

    给定一个 N 叉树,返回其节点值的层序遍历. (即从左到右,逐层遍历). 例如,给定一个 3叉树 : 返回其层序遍历: [ [1], [3,2,4], [5,6] ] 说明: 树的深度不会超过 100 ...

  4. Python之路【第一篇】：介绍、基本语法、流程控制

    一.python 简介 python 特点 Python是一种计算机程序设计语言.你可能已经听说过很多种流行的编程语言,比如非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网 ...

  5. 运用jquery做打印和导出操作

    我最近接手的项目中经常让做出打印和导出统计图和表格 首先说打印,打印如果用echarts做出来的图表,打印的时候,要借助jquery的打印插件. 打印插件: <script src=" ...

  6. 如何使用Eclipse插件—Easy Explorer

    Easy Explorer是一个Eclipse插件,主要用于快速浏览项目文件的目录,实用性比较强. 使用方法如下: 1.下载Easy Explorer,从此处下载EasyExplorer:http:/ ...

  7. [GCJ2017R2]Fresh Chocolate

    题目大意: 有n个团和很多盒糖,每个团中人数不一定相同,每盒糖中都有p颗糖. 现在要给每个团发糖,要求每个人都要发到糖,只有一盒糖发完后才能发下一盒糖. 发糖的顺序可以任意安排,问经过合理安排后,最多 ...

  8. 是否排序好了 Exercise07_19

    import java.util.Scanner; import java.util.Arrays; /** * @author 冰樱梦 * 时间2018年12月 * 题目:是否排序好了 * */ p ...

  9. bzoj 3165

    题意: 给出平面上一些线段,在线询问与x=x0相交的线段中,交点y最大的线段的标号,支持添加线段. 大概思路: 用线段树维护,线段树每个线段记录贯穿(左右端点在该区间外或上)的原线段中能覆盖其它贯穿该 ...

  10. bzoj 2038 小Z的袜子 莫队算法

    题意 给你一个长度序列,有多组询问,每次询问(l,r)任选两个数相同的概率.n <= 50000,数小于等于n. 莫队算法裸题. 莫队算法:将序列分为根号n段,将询问排序,以L所在的块为第一关键 ...