I am using jQuery UI to provide a modal window when a page loads. This works fine, however, the background layout is messed up compared to the way it should be.
Here is the dialog code:
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
Here is the jQuery:
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: true,
width: 300,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
Here is what the page should look like: http://www.rutlandinc.com/
This is how it looks with jquery dialog in place: http://www.rutlandinc.com/index2.html
Is it possible to have the cake and eat it too?
Thanks.
probably need to use the ready function. You need to load that when the document is ready.
$(document).ready(function () {
http://api.jquery.com/ready/
your site is loading very slow for me, so i can’t even look at the source code. But give that a shot.
Must be something else because this does work
Ok so its a CSS issue. jquery ui uses some generic css rules. Like state-hover, widget-ui etc… You have them defined in the jquery css file and the base.css file. You’ll need to take out what you don’t need.
The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.