I have a layout which has been defined for the whole page. There is a North and Center section. When I try to display a message with a call to $.messager.show, the message is under the North part. Please see the attached example. This is the example of the code used;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
function topCenter() {
$.messager.show({
title: 'Title',
msg: 'Message',
showType: 'slide',
style: {
right: '',
top: document.body.scrollTop + document.documentElement.scrollTop,
bottom: ''
}
});
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:30px"></div>
<div data-options="region:'center'">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="topCenter()">TopCenter</a>
</div>
</body>
</html>
I get the same error in FF, IE and Chrome. I've also tried using jQuery V1.7.2 with no luck.