I'm trying to use a JQuery dialog for deletion confirmation but I cannot seem to get it to show in front of everything so that it prevents interaction with other controls until its closed.

Below is my code:

<script>
function deleteItem(id) {

    $('body').append('<div id="confirm" title="Confirm Delete">' +
    '<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' +
    'The item will be deleted. Are you sure?</p></div>');

    $(function() {
        $('#confirm').dialog({
            resizable: false,
            height: 185,
            modal: true,
            show: {
                effect: 'slide',
                duration: 200
            },
            hide: {
                effect: 'slide',
                duration: 200
            },
            buttons: {
                'Delete': function() {
                    //Deletion code
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
    });
};
</script>

Please help. Thank you.

I'm trying to use a JQuery dialog for deletion confirmation but I cannot seem to get it to show in front of everything so that it prevents interaction with other controls until its closed.

Below is my code:

<script>
function deleteItem(id) {

    $('body').append('<div id="confirm" title="Confirm Delete">' +
    '<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' +
    'The item will be deleted. Are you sure?</p></div>');

    $(function() {
        $('#confirm').dialog({
            resizable: false,
            height: 185,
            modal: true,
            show: {
                effect: 'slide',
                duration: 200
            },
            hide: {
                effect: 'slide',
                duration: 200
            },
            buttons: {
                'Delete': function() {
                    //Deletion code
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
    });
};
</script>

Please help. Thank you.

• javascript
• jquery
• css
• modal-dialog

• Can you increase the z-index value? – Rupam Datta Commented Apr 15, 2014 at 9:27
• Tried adding that to my div's css style and adding it as a dialog property but nothing changed. – Dumisani Commented Apr 15, 2014 at 9:32
• Provide us with some HTML please. And try to have your z-index value of the dialog larger than other divs. – urbz Commented Apr 15, 2014 at 9:33
• I don't think the html is necessary. As you can see at the top of my code I dynamically create a div for the dialog. – Dumisani Commented Apr 15, 2014 at 9:43

1 Answer 1

change accordingly.

modal:false - for bring dialog as normal alert.

modal:true - it brings dialog front of the page.

See this example. Demo

   $('<div></div>').appendTo('body')
        .html('<div><h6>Yes or No?</h6></div>')
        .dialog({
        modal: true,
        title: 'message',
        zIndex: 10000,
        autoOpen: true,
        width: 'auto',
        resizable: false,
        buttons: {
            Yes: function () {
                item.remove();
                $(this).dialog("close");
            },
            No: function () {
                $(this).dialog("close");
            }
        },
        close: function (event, ui) {
            $(this).remove();
        }
    }); 

UPDATED

Ok. so you need finally this.

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