Message Box Position
<!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的更多相关文章
- Wix: Show conditional message box
For example: Scenario: Show message box only during installation and MYPROPERTY has to be equal to & ...
- a message box to confirm the action
当点击窗口的X按钮时,弹出确认退出消息框,继续点击Yes,退出.否则,窗口继续处于打开状态 代码: """ This program shows a confirmati ...
- mint-ui message box 问题；
当引用 mint-ui message box 的 出现的问题,我暂时是不知道为什么: 官网是这样写的: 于是 我也这么做的:(这里用小写,具体我也不清楚,毕竟文档上写的也不是很清楚,但是只有这样写, ...
- message box
QMessageBox 弹出框上的按钮设置为中文 Qt 默认的弹出框上的按钮式英文,虽然也知道是什么意思,但终究不如中文看着顺眼. QMessageBox box(QMessageBox::War ...
- Qt学习笔记-制作一个计算器-对话框Message Box
在做计算器的前提先做一个加法器. 设计界面. 在点击计算的时候,获取前两个输入框中的数据相加后显示在第三个输入框. toInt是将字符串转换为数字.number静态函数是将数字转化为字符串. 加法器已 ...
- vue 结合mint-ui Message box的使用方法
两种方式使用: 一.全局注册 1.在main.js中引入 //引入 import { MessageBox } from 'mint-ui'; //全局使用,挂载到原型上 Vue.prototyp ...
- Win32 error code message
http://fit.c2.com/fit/files/LispPlatform/lisp/clisp-2.28/src/errwin32.d # Calls a function, passing ...
- 模拟position:fixed效果
大家都知道fixed定位相对于浏览器窗口,下面就介绍一种不用fixed也能实现其效果的定位方法,就那点css代码,这里就直接呼上来: <!DOCTYPE html> <html> ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
随机推荐
- Makefile的使用方法
转自:http://blog.chinaunix.net/uid-403164-id-2407545.html 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Wind ...
- JS函数学习
=============数学函数========== 1.Math.random()为取随机数0~1之间的:0可以取到,1取不到 alert(Math.random()); 2.Math.PI为3. ...
- [实战]MVC5+EF6+MySql企业网盘实战(23)——文档列表
写在前面 上篇文章实现了图片列表,这篇文章实现文档列表将轻车熟路,因为逻辑基本相似,只是查询条件的不同.这里将txt,doc,docx,ppt,pptx,xls,xlsx的文件都归为文档列表中. 系列 ...
- out与ref修饰符
out修饰符 定义 作用 使用注意 总结 定义 out意为output,所以被out修饰的参数叫做输出参数. 通过使用out修饰的参数,方法可以返回对应参数的值 作用 先看一个例子 定义变量: ...
- 使用Unity解耦你的系统—PART3——依赖注入
继续学习Unity,在前几篇中已经将Unity的使用方法做了一个还算详细的介绍了,主要是如何通过代码及配置文件来注册对象之间的关系.Unity内置所有的生命周期管理使用介绍,及Unity的Regist ...
- TestDirector自定义管理：用户配置
一.进入Customize 1.打开TD,点击TestDirector,进入登录界面,在TD登录页面右上角点击“CUSTOMIZE(自定义)”. 2.选择要登录的域和项目,输入用户帐号和密码,点击确定 ...
- javascript右下角弹层及自动隐藏
在编写项目中总会需要有个右下角弹层提示公告的需求,怎么用更简单方面,更简洁代码,实现更好用户体验这个就是我们的所要做的内容.市场这块弹层很多,但功能不尽如人意.下面分享早些时候自己编写,以及现在还在应 ...
- NHibernate示例
1. 下载相关资源: 下载NHibernate.下载地址: http://nhforge.org/Default.aspx 下载微软Northwind示例数据库,下载地址:http://www.mic ...
- 《java虚拟机》----线程安全和锁优化
No1: 线程安全:当多个线程访问一个对象时,如果不用考虑这些线程在运行环境下的调度和交替执行,也不需要进行额外的同步,或者在调用方进行任何其他的协调操作,调用这个对象的行为都可以获得正确的结果,那这 ...
- git clone https
git clone 不需要输入密码步骤 1, vim ~/.git-credentials 2, git config --global credential.helper store 3, vim ...