Q: Creating custom alert box using javascript I am creating a custom alert box using Jquery's dialog. But I am facing two issues. I am not able to change the default close label for the close of pop up. I want a x symbol instead of close. Second thing is I am not sure how to give css to the pop up div. Please help. Also One more thing. I want the main page to be disabled when pop up is opened.
What I have done till here.
function yesnodialog(content, button1, button2, element) {
    var btns = {};
    btns[button1] = function () {
        element.parents('li').hide();
        $(this).dialog("close");
    };
    btns[button2] = function () {
        // Do nothing
        $(this).dialog("close");
    };

    $("<div border:1px solid black;><label> " + content + "</label></div>").dialog({
        autoOpen: true,
        title: 'Condition',
        modal: true,
        buttons: btns
    });
}

And in html i am calling the above js function as
 <li><span><button id="btsn" onclick="  yesnodialog('my content','Yes', 'No', $(this));"></button></span></li>


A: There is a few issues here. You should really check the jQuery documentation for a lot of the questions you are asking here.
<div border:1px solid black;><label>

This isnt valid. You can apply CSS to elements with the style attribute
<div style="border:1px solid black;" />

or you can use jQuery a number of ways:
$('<div></div>', {"style":"border:1px solid black;"}) 

Check the dialog documentation here: http://jqueryui.com/dialog/ at the bottom of each example there is a "View Source" which lets you see live examples on how to create dialogs.

A: Since you're using jQuery UI, it probably won't be a direct help, but look for something like Bootbox which is a JavaScript API that lets you write Bootstrap alerts, confirms, etc. without any HTML or CSS.
