2

我从我的设计师那里收到了一个 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);
        });
    };
4

1 回答 1

0

我认为问题在于您的 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 样式，因此您会在对话框中看到一个对话框。

于 2013-02-14T16:00:44.370 回答