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 ...
随机推荐
- 读书笔记|Windows 调试原理学习|持续更新
关于调试方面的学习笔记,主要来源于<软件调试>的读书笔记和梦织未来论坛的视频教程 1.调试器使用一个死循环监听调试信息. DebugActiveProcess(PID);while(TRU ...
- Linux中find用法
Linux中find用法 linux常用命令 find -name april* 在当前目录下查找以april开始的文件 find -name april* fprint file 在当前目录下查找以 ...
- Node.js的Buffer那些你可能不知道的用法
在大多数介绍Buffer的文章中,主要是围绕数据拼接和内存分配这两方面的.比如我们使用fs模块来读取文件内容的时候,返回的就是一个Buffer: fs.readFile('filename', fun ...
- vim常见操作命令
打开多文件vim file1 file2:open/:e 不关闭vim打开文件 分帧窗口:new 新窗口:sp 横向:vsp 纵向ctrl+w窗口切换:tabc 关闭当前窗口:tabo 关闭所有窗口: ...
- 洛谷P4644 [USACO2005 Dec]Cleaning Shifts 清理牛棚 [DP，数据结构优化]
题目传送门 清理牛棚 题目描述 Farmer John's cows, pampered since birth, have reached new heights of fastidiousness ...
- GETATTR,DELATTR,SETATTR与GETITEM,SETITEM,DELITEM区别
通过对象.属性的方式触发的是__getattr__,__delattr__,__setattr__ 通过对象['属性']触发__getitem__,__setitem__,__delitem__ cl ...
- js中箭头函数和普通函数this的区别
最近在学习angularJs的时候由于里面涉及到了箭头函数,箭头函数除了声明上有点区别以外,和普通函数最主要的区别还是在this的问题上. Js中函数中嵌套的函数this不会 “继承”.比如说以下代码 ...
- Django+Nginx+uwsgi搭建自己的博客（四）
由于在上篇博文中仍然介绍了相当多的后端部分,导致原定于上篇介绍的前端部分“跳票”到了这篇.在此篇博文中,我将会介绍Users App和主页的前端部分,从而形成我们博客的一个雏形. 在前端部分,我们主要 ...
- 验证Xcode真伪的方法，来自苹果官网
验证Xcode真伪的方法,来自苹果官网 Xcode的验证你的版本 2015年9月22日 注意:中文为有道翻译,看下验证方法即可. 我们最近将应用程序从应用程序商店,还建有Xcode的假冒 ...
- 51nod1380 夹克老爷的逢三抽一
问题等价于选出$n / 3$个不相邻元素是权值和最大 这是一个经典贪心问题,同种树,拿堆维护即可,复杂度$O(n \log n)$ #include <queue> #include &l ...