Question

I wonder whether someone may be able to help me please.

I’ve put together this gallery page.

Using the icon under each image a user can delete any image they wish. Rather than deleting the image immediately, I’me trying to implement a Modal Confirmation Dialog box, so the user has the option to cancel the delete.

I can get the onlick event to work, but the text which asks the user whether they want to delete the image disappears from the dialog box when clicked.

I did have an issue with dialog box text appearing at the top of my page on page load. To overcome this I’ve used the following:

I have tried adding the following to prevent this:

.hide{   display: none !important;   }  

<div id="dialog-confirm" class="hide" title="Delete This Image?"> 

So I know that the issue is more than likely being caused by the this, but I’m not sure how to overcome both problems.

I just wondered whether someone may be able to look at this please and let me know where I’ve gone wrong.

Many thanks and regards

Answer 1

You can pass the option autoOpen: false instead in your dialog call to hide it until it is called;

$( "#dialog-confirm" ).dialog({
    autoOpen: false
});

With this option in place, the dialog should be hidden from view until its called.

Also, you have placed the .hide class outside the <style>..</style> tags and its appearing on top of your page.