jquery popup is setting styles for entire page

Hello

I am using jquery popup dialog.  It works, but when I use it on my page it changes the styles and format for entire page.   Is it possible to turn off the css styles for the rest of the page?

jquery popup is setting styles for entire page and might be a way to turn this off:

<div id="no_css">
    my content
</div>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
johnsonallstarsAsked:
Who is Participating?
 
Tom BeckCommented:
I suppose you could detect if the visitor is using a mobile device and switch everything over to Jquery Mobile styling. Seems like it would drastically change the look and feel of the web site however. I never saw a need myself. My clients want the site's "branding" to be preserved at ALL screen sizes.

Bootstrap is a css and javascript framework for building web pages. They claim to be the most popular. They are probably right. They have several per-formated examples here

If you click on one like Jumbotron and shrink your browser window down narrower, you will see how the content responds. Shrink it to 320 pixels wide and that's how it will look on an iPhone screen. The upper right menu collapses to a mobile style dropdown for example.

You could design such functionality from scratch if you want to. Starting with a bootstrap stylesheet as a foundation just saves a ton of time. You can still customize it as much as you need.
0
 
Tom BeckCommented:
Not enough information to troubleshoot the problem. The trouble you are reporting is not typical of jQuery Dialog so there's no way to recreate the problem based on what you have posted. Need a link to a web site, your stylesheets, source code of a rendered page or something more in order to pursue this further. You really don't want to turn off styles for the entire page when the dialog is visible. That would look worse.
0
 
johnsonallstarsAuthor Commented:
Tom Beck … here's the page in question…Thanks you.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>


This drop box does not show or any of these words, unless I add it to the div=myId.  If I add it in that div, it uses the styles they provide.
<select >
     <option >Cars</option>
     <option  selected>Boats</option>
     <option>Trains</option>
      <option >Planes</option>
</select>



<div id="myId" data-role="page" style="background-color:white;">


  <div data-role="main" class="ui-content">
 
        <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>

    <div data-role="popup" id="myPopup" class="ui-content">
      <p>This is a simple <b>popup</b>!</p>
      <p>Read more to find out how to control  me!</p>
    </div>
  </div>
</div>

</body>
</html>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Tom BeckCommented:
Your page has css for mobile devices (jQuery.mobile-1.4.5.min.css). When you give a container data-role="page" it is styled to take up the entire screen. It will assume the height of the screen and have position set to absolute, top:0, left:0, background-color:#f9f9f9 (off-white). The container will then cover everything else on the page. Take out data-role="page" and you will see the dropdown list. Or, put all content INSIDE the div with data-role="page".
0
 
johnsonallstarsAuthor Commented:
Ok.  I removed the data-role="page" and it does show (my content) now.  However, I'm trying to get it to show (my content, not the popup) with its own style or without any style.  Basically, I would like for my content to show as default html without any styles.  I'd like to keep the styles used for the popup.

Thanks in advance.
0
 
Tom BeckCommented:
Then why use jQuery mobile at all? jQuery Mobile is for designing mobile device interfaces exclusively. Mobile browsers are capable of rendering web pages whether they use jQuery mobile styling or not. If all you want is responsiveness, start with bootstrap or something similar as a foundation and create a standard web page that responds well to smaller screens.
0
 
johnsonallstarsAuthor Commented:
So, you are saying it is just not possible with the jquery mobile to use multiple styles.  If I use boot strap, example that you mentioned do you have any examples.
0
 
johnsonallstarsAuthor Commented:
I guess I can appreciate your opinion .  However, I would like to get an answer for my  question.  The question being "how to use jQuery PopUp with (my content) under a different style.  I felt the j-query example provided was simple and that it would be an easy answer for an expert.
0
 
Tom BeckCommented:
Go here and create your own theme for the dropdown. Then add the data-theme attribute to the container to change the stye of just the content in that container. Don't use data-role="page" for any container unless you want it to cover the entire page.
<div id="myId1" data-role="content" data-theme="z" style="background-color:white">
<select name="mySelect">
     <option value="cars">Cars</option>
     <option value="boats"  selected>Boats</option>
     <option value="trains">Trains</option>
      <option value="planes" >Planes</option>
</select>
</div>

<div id="myId2" data-role="content" data-theme="a" style="background-color:white">
  <div data-role="main" class="ui-content"> 
        <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>    
  </div>
  <div data-role="popup" id="myPopup" class="ui-content">
      <p>This is a simple <b>popup</b>!</p>
      <p>Read more to find out how to control  me!</p>
    </div>
</div> 

Open in new window

I would not have attempted to answer this question if I had known it was about jQuery mobile. That's a critical part equation but that piece of information was not included in the original question.
0
 
johnsonallstarsAuthor Commented:
Thank you Tom.  I liked the theme roller and will also be looking at bootstrap for next project.  I meant to accept both as answers.
0
 
Tom BeckCommented:
No matter. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.