2016-09-03 2 views
2

Страница index.html, где кнопка в диалоговом окне JQuery имеет фоновое изображение, прикрепленное к странице с помощью CSS. Связанная страница dialog.html имеет другое фоновое изображение, чем страница index.html.Содержимое CSS JQuery Dialog останется при смене страниц

Когда вы нажмете кнопку, чтобы открыть страницу диалога, страница изменится на dialog.html в веб-браузере. Однако инспектор инструмента разработчика все еще полагает, что он использует CSS на странице index.html.

Я ссылку на страницу dialog.html из index.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%; 
    } 
+0

Комментарий: вы также можете настроить скрипку (поиск скрипта JS), чтобы получить ответ более легко. – K48

ответ

0

Вам нужно разместить АЯКС-данные = «ложь» в конце каждый из ссылок, чтобы остановить Работает JQuery Mobile.

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

Добавить класс в теги тела в соответствующей папке эс следующего

В индексной странице

<body class="home"> 

В диалоговой странице

<body class="dialog"> 
+0

Эти функции уже реализованы. если бы я сказал, обновить страницу dialog.html, то css начнет использовать body.dialog –

Смежные вопросы