CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Muhammad Kamran
Muhammad Kamran

Reputation: 561

How to avoid jQuery mobile styles on other sections of the website?

I want to used popup to show signup form. For that purpose I have used jQuery mobile's popup.

So when I added jQuery mobile CSS and JavaScript they have affected the whole page. All the text, menus, links and everything is changed by it.

How I can restrict the jQuery Mobile styles and JavaScript to work on that popup only?

I have completed the whole design so I can't change the styles one by one again.

Here is my code

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>

and here is my HTML

<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>

<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
  <div data-role="header" data-theme="a">
    <h1>Signup</h1>
  </div>
  <div role="main" class="ui-content">
    <h3 class="ui-title">Are you sure you want to Signup</h3>
    <p>This action cannot be undone.</p>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
  </div>
</div>

Upvotes: 1

Views: 251

Answers (1)

Sabir Mustafa
Sabir Mustafa

Reputation: 188

Change the Pattern. Please bring the mobile CSS file before your custom CSS file. Will change it completly.

Cheers!

Upvotes: 1

Related Questions