Databases
StackOverflow2013
Postsdbo
POSetting dialog overlay Jquery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSetting dialog overlay Jquery
    primarykey
    data
    text
    <p>I want to set the overlay of a jQuery dialog to an image, and can't seem to manage the task.</p> <p>I have other dialogs on the pages that I want to no have the background images, so setting the css for the overlay background won't work as a blanket solution.</p> <p>I have tried a lot of different methods, and I believe there is a timing issue with the appliction of the jQuery command to set the overlay with css and the actual dialog div's and css getting added to the DOM.</p> <p>Here is what I have tried so far. </p> <pre><code>$('#submitUpload').click(function(){ $("#uploadStart").dialog('open'); $(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'}) $("#uploadForm").submit(); }); </code></pre> <p>OR </p> <pre><code>$("#uploadStart").dialog({ autoOpen: false, width: 400, modal: true, closeOnEscape: false, draggable: false, resizable: false, open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); $(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'}) } }); </code></pre> <p>I have also tried using the dialogClass method on the dialog code with no success.</p> <p>With both the absolute url and the relative, and the url in quotes or with no quotes.</p> <p>The image exists in the directory.</p> <p>Anyone have any ideas on how to get jQuery to apply with the correct timing to display the image as the overlay?</p> <p>Thanks!</p> <p><strong>Update</strong></p> <p>The dialog class designation will allow you to set classes for the overal dialog. I was actually looking to just tap into the specific ui-widget-overlay class and over-ride the background image there. I found that trying to override the background using the dialogClass worked for overriding the background of the dialog, not the overlay background.</p> <p>When the dialog is added to the DOM, jQuery loads it's div's right before the body tag.</p> <p>I found a solution, being that in the open method for the dialog, I used</p> <pre><code>$(".ui-widget-overlay").addClass('artFTP'); </code></pre> <p>to add a class</p> <pre><code>.artFTP{background-image: url(../../images/ftp-page-bg.gif); opacity:1;} </code></pre> <p>and made sure it was the last class in the file that would overwrite the overlay background image.</p> <p>I hope this helps someone. </p> <p>Thanks and +1 to jjross, your answer got me to jump back into the jQuery docs.</p> <p><strong>If anyone has a better solution</strong>, please post. I would be happy to see it. I think there might be a way to use CSS to accomplish the task, but (for the life of me) couldn't figure it out.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKris.Mitchell
    1. USKris.Mitchell
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSetting dialog overlay Jquery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSetting dialog overlay Jquery
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POSetting dialog overlay Jquery
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload