zoukankan html css js c++ java

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>

查看全文

相关阅读:
linux下安装启动rpc服务
 Red Hat5下源码安装mysql5.6过程记录
 安装使用Oracle OSWbb/OSWbba工具
 使用pip安装BeautifulSoup4模块
 部署Thomas Kyte 的 runstats 工具
 centos7之zabbix监控DELL磁盘阵列
 centos6.5之phpmyadmin安装
 centos7之zabbix服务器的常规优化及其它设置
 centos7之zabbix简单检查之端口监控
 mysql和mariadb备份工具xtrabackup和mariabackup（mariadb上版本必须用这个）

原文地址：https://www.cnblogs.com/azhqiang/p/4435333.html