How to show alert box with checkbox in jquery

Question

I know how to display the alert(or something like it) box in the jquery but how can i insert the custom control inside the alert box. I want to make a database call when the user checked the checkbox.

I tried to use the following but not worked as it is only for text:

var name = window.prompt("prompt goes here", "text");

but i want to add checkbox.

Answer 1

In jQuery, you can do something like this:

var customDialog = function (options) {
        $('<div></div>').appendTo('body')
                        .html('<input type="checkbox" id="myCheckBox" />Test Checkbox<div style="margin-top: 15px; font-weight: bold;">' + options.message + '</div>')
                        .dialog({
                            modal: true,
                            title: options.title || 'Alert Message', zIndex: 10000, autoOpen: true,
                            width: 'auto', resizable: false,
                            buttons: {
                                Ok: function () {
                                    $(this).dialog("close");
                                },
                            },
                            close: function (event, ui) {
                                $(this).remove();
                            }
                        });
};

and call it like this:

customDialog({message: 'Test Message'});

As you can notice in the above code, you can add any custom html in jQuery's html method. Here opetions is a javascript object literal. In the above example it is having two known properties, ie message and title , which you can pass while calling. You are free to customize it into any extent.

Update: Created a jsfiddle for your reference.