Message Box Position

时间：2015-04-17 17:56:18 阅读：135 评论：0 收藏：0 [点我收藏+]
标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/azhqiang/p/4435333.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行