<!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. Fedora下rstudio-server安装

    安装 sudo yum install openssl sudo yum install mysql-server wget https://download2.rstudio.org/rstudio ...

  2. iOS控制器与视图加载方法

    转载记录, 请看原文: 1. iOS中的各种加载方法(initWithNibName,loadNibNamed,initWithCoder,awakeFromNib等等)简单使用   http://w ...

  3. 如何设计一个基于Node.js和Express的网站架构？

    前言 今年七月份,我和几个小伙伴们合伙建立了一个开发团队.业务开展如火如荼的同时,团队宣传就提上了日程,所以迫切需要搭建公司网站出来.确定目标后我们就开始考虑如果构建一个企业网站.先是进行业内调查,看 ...

  4. python的多线程threading

    多线程threading 1.Thread创建线程: 上代码: #!/usr/bin/env python3 import threading import time def A(): t_name ...

  5. Vibrator震动

    今天又学一招: Android手机中的震动由Vibrator实现.设置震动事件,需要知道其震动的时间长短.震动的周期等. 在 Android Vibrator中,震动的时间以毫秒计算(1/1000秒) ...

  6. OOD沉思录 --- 类和对象的关系 --- 使用关系

    使用关系 对象A的方法MethodA使用了B的方法MethodB,则表示A对B存在使用关系 使用关系的最关键问题在于,A如何找到B,存在6种方案 方案一: A包含了B,B作为一个成员定义在A的类中,那 ...

  7. 洛谷P1088 火星人 [STL]

    题目传送门 火星人 格式难调,题面就不放了. 分析: 这道题目不得不又让人感叹,还是$STL$大法好!!! $C++$的$algorithm$库中自带有$next\_permutation()$和$p ...

  8. Python并发编程-协程

    利用Greenlet模块在多线程之间切换 from greenlet import greenlet def eat(): print('eating start') g2.switch() prin ...

  9. sublime text3 常用插件

    1.代码格式化:html-css-js prettify 2.代码注释:docBlockr 3.代码管理:git.gitGutter 4.快速编辑:emmet 5.代码匹配:bracket highl ...

  10. Scrapy学习篇（三）之创建项目

    创建项目 创建项目是爬取内容的第一步,之前已经讲过,Scrapy通过scrapy startproject <project_name>命令来在当前目录下创建一个新的项目. 下面我们创建一 ...