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, i.e. 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.