CODEWITHSUNDEEP
jqueryjquery-uidialogtransparency
Reinard
Reinard

Reputation: 3654

JQuery dialog - make background transparent but still moveable

I'm trying to add a transparent JQuery dialog. But I'm running into two issues:

The comments are what I tried so far.

    //Create new components
    var newComponent= "<div id='Component"+ componentOffset  +"' class='ui-widget'><h1>Hello</h1></div>";
    $('#rootArea').append(newComponent);
    $('#Component' + componentOffset).dialog({
        dialogClass: 'transparent-dialog'
    });
    //$('#Component' + componentOffset).css('background-color', 'rgba(255,255,255,0.0)');
    //Adding style to newComponent div: style='background-color: rgba(255,255,255,0.0); '

css:

.transparent-dialog {
    background-color: rgba(255,255,255,0.0);    
}

.transparent-dialog .ui-dialog-titlebar {
display:none
}

enter image description here

The goal is to make it only show borders and background upon hovering over. I figured I could also display the title bar again upon hovering. This way I can still drag the component without to much trouble.

Upvotes: 2

Views: 9362

Answers (2)

Rudiger W.
Rudiger W.

Reputation: 868

jquery ui also has an option called dialogClass This worked for me:

<style>
.yellow-dialog {
  background-color: yellow;
}
</style>

<div id="my-dialog">Hello</div>

<script>
$("#my-dialog").dialog({
  modal: true,
  dialogClass: "yellow-dialog"
});
</script>

Upvotes: 1

jme11
jme11

Reputation: 17374

To cause all jQueryUI dialogs to be transparent, just override the default styles for the widget by adding the following to your custom CSS file (there should be no need to add your custom .transparent-dialog class as a result):

CSS:

.ui-widget-header {
  border: none;
  background: transparent;
}
.ui-widget-content {
  background: transparent;
}

If you want just one specific dialog to be transparent and others to retain the background, then you can target it with your id or give it an additional class, such as:

.transparent-dialog {
  background: transparent;
}
.transparent-dialog .ui-widget-header {
  border: none;
  background: transparent;
}
.transparent-dialog .ui-widget-content {
  background: transparent;
}

Upvotes: 6

Related Questions