CODEWITHSUNDEEP
jquerycssdialogmodal-dialog
bart2puck
bart2puck

Reputation: 2522

horizontal bar on jquery dialog

i have a standard dialog window and when it shows up, i see a white horizontal bar behind it. any ideas why? It can be seen on Here. just spell a word correctly to see dialog problem. forgive any other layout errors and other problems,.

               $( "#goodJob" ).dialog({
                   height: 240,
                   modal: true,
                   buttons: {
                       "Next Word": function() {
                            $('#loading').show();   
                            $.ajax({
                                    type: "POST",           
                                    url: "printPage.php",
                                    data:"streak="+streak,  
                                    success: function(result)
                                    {                       
                                            $('#mainBody').html(result);
                                            $('#loading').hide();   
                                    }                       
                                  });               
                            $( this ).dialog( "close" );
                            $(this).empty();                        
                            }               
                            }       
                    });

Upvotes: 0

Views: 812

Answers (4)

SajithNair
SajithNair

Reputation: 3867

In this file http://bartmueller.com/js/jquery-ui-themes-1.10.1/themes/smoothness/jquery-ui.css

.ui-widget-overlay {
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .3;
    filter: Alpha(Opacity=30);
}

remove the line

background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;

Upvotes: 2

Dimag Kharab
Dimag Kharab

Reputation: 4519

.ui-widget-overlay 
{
 /*Its beacause of the background image     -->*/   background: url('images/ui-bg_flat_0_aaaaaa_40x100.png') repeat-x scroll 50% 50% #AAA;
        opacity: 0.3;
 }

Upvotes: 1

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

You have class "ui-widget-overlay" for a div and that have the following css for background which the root cause of issue 

.ui-widget-overlay {
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .3;
    filter: Alpha(Opacity=30);
}

you remove that background and check it.

Upvotes: 1

wander
wander

Reputation: 957

Modify your css.css file in line 71:

from background-color: #E0F; to background: #E0F;

Because in jquery-ui.css, the background is set to be an image, while your background-color property cannot override the background property(because background property includes background-image and background-color)

Upvotes: 2

Related Questions