Link to home
Start Free TrialLog in
Avatar of johnsonallstars
johnsonallstars

asked on

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>
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

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.
Avatar of johnsonallstars
johnsonallstars

ASKER

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>
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".
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.
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.
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.
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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.
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.
No matter. Thanks for the points.