How to take bar of a modal

Question

Hello, how do I get this gray bar off the modal ??

$(function() 
    {
        var dialog, form,
        dialog = $( "#painel_fazer_upload" ).dialog
        ({
          autoOpen: false,
          height: 520,
          width: 500,
          modal: true,
        });

        $( "#painel_upload" ).button().on( "click", function()
        {
          dialog.dialog( "open" );
        });
    });

Answer 1

It is possible to remove the background and gray border of the modal title by overriding the original CSS of the jQuery UI as follows:

.ui-dialog-titlebar{
    //tira a cor de fundo cinza
    background: transparent;
    //tira a cor da borda
    border: none;
}

Don’t forget to add these lines right after the inclusion of the jQuery UI CSS file so that these class rules are rewritten.

Another option is to change them directly in the CSS file if possible.

Answer 2

You should do this with CSS. The class that has this div is .ui-dialog-titlebar and if you use CSS it is automatically invisible to all dialog. You can do so:

.ui-dialog-titlebar{
  visibility: hidden !important;
}

Example: http://jsfiddle.net/gb7w37de/1/

If you want to change color you can change parameters in CSS like background-color, border, or specifically border-color.

You can also do this with Javascript/jQuery. In this case something like $('.ui-dialog-titlebar').css('visibility', 'hidden'); or apply a CSS class.

Example via Javascript: http://jsfiddle.net/gb7w37de/