JQuery 对话框的 CSS 内容将在更改页面时保留

Question

index.html 页面，其中我的 JQuery 对话框的按钮使用 CSS 将背景图像附加到页面。 linked 的 dialog.html 页面与 index.html 页面的背景图像不同。

当您按下按钮打开对话框页面时，页面在网络浏览器中变为 dialog.html。但是，Developer 工具的检查器仍然认为它正在使用 index.html 页面中的 CSS。

我 link 通过这样做从 index.html 到 dialog.html 页面：

    <div data-role="main" class="ui-content" data-theme="b">
        <a href="dialog.html" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" data-transition="pop">Sign Up Now!</a></p>
    </div>

这就是 dialog.html 处理传入信息的方式：

    <div data-role="page" data-dialog="true" data-theme="b">
        <div data-role="header">
            <h4>Join Our Team</h4>
        </div>
        <div class="ui-content" role="main">
            <form method="post" action="email.php">
                <div>
                    <label class="ui-hidden-accessible">Name:</label>
                    <input type="text" name="name" placeholder="Name" value="">
                    <label class="ui-hidden-accessible">Age:</label>
                    <input type="text" name="age" placeholder="Age" value="">
                    <label class="ui-hidden-accessible">Email:</label>
                    <input type="text" name="email" placeholder="Google Play Email" value="">
                    <input type="submit" name="submit" value="Submit">
                </div>
            </form>             
        </div>
    </div>

这里是与代码关联的 CSS：

    body.home {
        background: url(img/WebsiteBackground.jpg);
        background-position:20% 50%;
        background-attachment:fixed;
        background-size:cover;
    }
    .ui-page {
        background: transparent;
    }
    .ui-content{
        background: transparent;
    }
    body.dialog {
        background: url(img/white.jpg);
        background-position:20% 50%;
        background-attachment:fixed;
        background-size:cover;
    }
    .ui-header .ui-title {
        color:black;
        margin-right: 10%;
        margin-left: 10%;
    }

Answer 1

在各自页面的正文标签中添加class如下

在索引页

<body class="home">

在对话框页面中

<body class="dialog">

Answer 2

您需要在每个链接的末尾放置一个 ajax-data="false" 以停止来自运行的 JQuery 移动设备。

    <a href="your_page.html" class="your_class" ajax-data="false">Sign Up Now!</a>

JQuery 对话框的 CSS 内容将在更改页面时保留

JQuery Dialog's CSS content will remain when changing pages

html

jquery

dialog

background-image

jquery-ui-dialog