javascript - EasyUi1.4.0（JQuery版本1.11.0），dialog（对话框）组件在火狐浏览器下显示不全的问题？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - EasyUi1.4.0（JQuery版本1.11.0），dialog（对话框）组件在火狐浏览器下显示不全的问题？

ringa_lee 2017-04-10 17:05:05

[JavaScript讨论组]

220

描述：

所有文件css、js包括jquery都是在官网下载的，不存在版本冲突，另外又下载了最新的1.4.4，发现又有这个问题，而在IE8+和谷歌下都是没有问题的，所以也不可能是bug,那最有可能的应该是火狐浏览器多做了什么工作了，下面上图：

利用firebug查看（最终html元素）：

问题是发现了，这个样式应该是初始化时动态生成的，原谅我真的不是专业前端开发，该怎么改呢,在哪里改呢，jquery or easyui？有没有遇到相同问题的同事，给个建议。头都大了，求大神围观！！！

ringa_lee

全部回复(1)

PHPz2017-04-10 17:07:05 1楼

自己手工设置下位置看看

$('#dialog').dialog({
  ...
  left:...
  top:...
  ...
});

或
在对话框显示后，调用center方法看看

$('#dialog').dialog(“center”);

官网给你例子在firefox下ok没问题的

按你的页面结构，测试了下，在firefox没有出现问题~~
把你的CSS及精简后的页面代码贴出来看看吧~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="script/easyui_1_4_4/themes/default/easyui.css">
    <!--jquery 1.11.3 jquery 2.1.3也是同样-->
    <script type="text/javascript" src="script/easyui_1_4_4/jquery.min.js"></script>
    <script type="text/javascript" src="script/easyui_1_4_4/jquery.easyui.min.js"></script>
    <script>
        $(function(){
            $('#openDialog').on("click",function(){
                //JS动态创建
                $('body').append('<p id="messageDialog"></p>');
                $('#messageDialog').dialog({
                    width:500,
                    height:500,
                    modal:true,
                    closed: false,
                    cache: false,
                    content:'TEST~~~'
                });

                //$('#dd').dialog("open");

            });
        });

    </script>
</head>
<body class="easyui-layout">
    <p data-options="region:'north',title:'North Title',split:true" style="height:100px;">
        <button id="openDialog">openDialog</button>
    </p>
    <p data-options="region:'south',title:'South Title',split:true" style="height:100px;"></p>
    <p data-options="region:'east',title:'East',split:true" style="width:100px;"></p>
    <p data-options="region:'west',title:'West',split:true" style="width:100px;"></p>
    <p data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></p>
    <!--声明式创建-->
    <p id="dd" class="easyui-dialog" title="My Dialog" style="width:486px;height:400px;"
         data-options="iconCls:'icon-save',closed:true,modal:true">
        Dialog Content.
    </p>

</body>

</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>