Question

我收到了设计师的一个html文件，其中包含一个登录对话框（Jquery UI）。当我试图动态加载它时，我在另一个对话框中看到了设计的对话框。这是我的HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>groboot</title>
<link rel="stylesheet" type="text/css"  href="views/viewobjects/css/styles.css" />

</head>
<body>
<div id="loginViewDialog" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable dialog-box transparent" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-2">

<div class="innerbox">

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span class="ui-dialog-title" id="ui-dialog-title-2">Login</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
</div><!-- end div ui-dialog-title-2 -->

<div class="ui-dialog-content ui-widget-content dialog clr" >

<div class="loginform">

<input id="emailTextField"  class="input-text" type="text" value="Email / User name:" />
<input class="input-text" id="passwordTextField" type="password" value="Password" />

</div>
<input id="keepLoginCheckBox" type="checkbox" /><label for="keepLoginCheckBox"> Keep me logged in</label><br />


<span id="loginMessageSpan" >message</span><br />
<a href="#" id="loginUserButton" class="floatlft" ><span>Login</span></a>
<a href="#" id="forgotPasswordButton" title="Forgot your password?" ><span>Forgot your password?</span></a>
</div><!--ui-dialog-content-->
</div><!--innerbox-->
<div class="center">
<a href="#" id="emailSupportButton" title="Forgot your password?" ><span>Email Support</span></a>
<a href="#" id="newUserButton" title="Register a New User (free)" ><span>Register a New User (free)</span></a>
</div><!--center-->
</div><!--loginViewDialog-->
</body>
</html>

以下是我在AJAX中加载它的方法：

_prototype.initView = function () {
    var self = this;
    $(self._currentDiv).load("views/viewobjects/LoginView.html", function () {

        self._defaultSettings = {
            title: "Login",
            hide: "fade",
            show: "fade",
            modal: true,
            resizable: false,
            autoOpen: true,
            minWidth: 465,
            maxWidth: 800,
            minHeight: 200,
            maxHeight: 200,
            //dialogClass: "loginDialogDiv",
            draggable: true
        };



            $(self._dialogDiv).html(self._currentDiv);
$(this._dialogDiv).dialog(this._defaultSettings);
        });
    };

Answer 1

我认为问题在于您的HTML视图文件有多于您需要的div。如果仔细观察，可以在HTML中看到一些JQueryUI对话框类。

尝试使用此HTML文件：

<div class="innerbox">
    <div class="dialog clr" >
        <div class="loginform">
            <input id="emailTextField"  class="input-text" type="text" value="Email / User name:" />
            <input class="input-text" id="passwordTextField" type="password" value="Password" />

        </div>
        <input id="keepLoginCheckBox" type="checkbox" /><label for="keepLoginCheckBox"> Keep me logged in</label><br />
        <span id="loginMessageSpan" >message</span><br />
        <a href="#" id="loginUserButton" class="floatlft" ><span>Login</span></a>
        <a href="#" id="forgotPasswordButton" title="Forgot your password?" ><span>Forgot your password?</span></a>
    </div><!--ui-dialog-content-->
</div><!--innerbox-->
<div class="center">
    <a href="#" id="emailSupportButton" title="Forgot your password?" ><span>Email Support</span></a>
    <a href="#" id="newUserButton" title="Register a New User (free)" ><span>Register a New User (free)</span></a>
</div><!--center-->

基本上，您的原始HTML文件有一些包含JQueryUI使用的类的div，如ui-dialog-titlebar或ui-dialog-content。因此，您的页面渲染效果很好，但是复制了CSS样式，因此您可以在对话框中看到对话框。

Jquery UI对话框 - 动态加载对话框，而不仅仅是内容

1 个答案: