gpt4 book ai didi

javascript - Jquery UI 对话框 - 动态加载对话框,而不仅仅是它的内容

转载 作者:行者123 更新时间:2023-11-28 03:35:27 25 4
gpt4 key购买 nike

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

最佳答案

我认为问题在于您的 HTML View 文件中的 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-titlebarui-dialog-content。因此,您的页面呈现良好,但应用了重复的 CSS 样式,因此您会在对话框中看到一个对话框。

关于javascript - Jquery UI 对话框 - 动态加载对话框,而不仅仅是它的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14682359/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com