Question

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

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

我通过执行以下操作链接到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

在您的身体标签中添加类，如下所示

在索引页面

<body class="home">

在对话框页面

<body class="dialog">

Answer 2

您需要在每个链接的末尾放置一个ajax-data =“false”，以阻止JQuery Mobile运行。

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

更改页面时，JQuery Dialog的CSS内容将保留

2 个答案: