Question

function deleteRecordDialog() {
    var returnThis;
    var numRecordss = recs.length;
    var html = ""
    /*html= html +'<div id="popupContainer" style="width:' + width + 'px; height: ' + height + '; display: block;">';
    html= html + '<div id="popupInner">';
    html= html + '<div id="popupFrame">';
    html= html + '<div class="margin15px dialog-messages">';*/
    html= html + '<table>';
    html= html + '<tr>';
    html= html + '<td class="warning-icon-cell"></td>';
    html= html + '<td style="padding-left: 5px;">';
    if (numAddresses == 1) {
        html = html + '<p>You have chosen to delete a contact.</p>';
    }
    else {
        html = html + '<p>You have chosen to delete ' + numAddresses + ' contact(s).</p>';
    }
    html= html + '<p>Are you sure you wish to proceed?</p>';
    html= html + '</td>';
    html= html + '</tr>';
    html = html + '</table>';
    if (numAddresses == 1) {
        html = html + '<div class="add-postage-submit-buttons"><input type="button" value="Yes, Delete Contact" style="width: 160px; onclick="returnThis=true; CloseDialog();"/>&nbsp;&nbsp;<input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
    }
    else {
        html = html + '<div class="add-postage-submit-buttons"><input type="submit" value="Yes, Delete Contact(s)" style="width: 160px; onclick="returnThis=true; CloseDialog();"/>&nbsp;&nbsp;<input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
    }
    html = html + '</div>';
    html = html + '</div>';
    html = html + '</div>';
    html = html + '</div>';
    OpenDialog(html, 350, 180, false, "Delete Contact")
    return returnThis;
}

Now usually I’d use JQuery and set modal to true to enable the false/true to be assigned but I don’t have the luxury of jquery with this. Is there a way to use this custom dialog?

Is there a way to do the following without JQuery?

$("#dialogInfo").dialog({
    modal: true
});

Answer 1

The jQuery-ui-dialog just runs a bunch of JavaScript code behind the scenes to give the appearance of a dialog box.

You can accomplish much of the same functionality using CSS.

I’m not going to tell you exactly what to do here, but I’ll point you in the general direction.

For starters, you can create a div that will contain your dialog box content. Give it id dialog.

Then, in CSS, give it position:fixed and display:none and z-index:9999 along with the width and height you desire. Knowing exactly what its size is, you can write JavaScript code to center it on the screen. When you want to display the dialog, set its display property to block. Also, be sure to give it a background color and a border. That will allow you to give part of your document the appearance of being like a dialog box.

If you want to have a ‘mask’ behind the dialog box so that the user can’t click on anything else on the page, create another div with id mask. Give it these CSS properties: position:fixed, top:0px, left:0px,height:100%, width:100%, display:nonebackground-color:black,z-index:9998,opacity:0.8. When you want to display the dialog as modal, set this div'sdisplayproperty toblock` as well.

Finally, jQuery-ui-dialog also captures [Tab] key presses to keep the keyboard focus inside the modal dialog. Feel free to do this as well, if you like.

Happy Coding!