Type1:
bootbox.confirm("<form id='formId' action=''>\
First name:<input type='text' name='fname' /><br/>\
Last name:<input type='text' name='lname' />\
</form>", function(result) {
if(result)
$('#formId').submit();
});
Type2:
BOOTBOX form with datepicker modal calendar:
<-----HTML Code----->
<button class="add_date_btn btn btn-primary btn-sm">View modal with date</button>
<!——–CSS Code —->
.ui-datepicker{
z-index: 9999999 !important;
}
<!———-JavaScript + JQuery 1.9.1 Code—–>
var datepicker_opts = {
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
altFormat: "yymmdd",
setDate: new Date(),
maxDate: new Date()
};
BootboxContent = function(){
var frm_str = '<form id="formId">'
+'<div class="form-group">'
+ '<label for="date">Date</label>'
+ '<input id="date" class="date span2 form-control input-sm" size="16" placeholder="mm/dd/yy" type="text">'
+ '</div>'
+ '</form>';
var object = $('<div/>').html(frm_str).contents();
object.find('.date').datepicker(
$.extend({
beforeShow: function(elem, inst) {
$(document).off('focusin.bs.modal');
},
onClose: function(selectedDate, inst) {
$modal = $(inst.input[0]).closest(".modal").data('bs.modal');
$modal.enforceFocus();
}
}, datepicker_opts)
);
return object
}
$('.add_date_btn').on('click', function () {
bootbox.dialog({
message: BootboxContent,
title: "View modal with date",
buttons: {
cancelar: {
label: "Cancel",
className: "btn-default"
}
}
});
}); //End click
Leave a Reply