Styling bootbox подтвердить диалоговое
мы можем настроить bootbox используя предопределенный Classname. Мы можем также включить проверку формы в виде модальной. пожалуйста, следуйте этим ссылки изучить больше о bootbox:
http://formvalidation.io/examples/bootbox/
http://bootboxjs.com/v3.x/examples.html
Помимо них вы можете изучить эти коды также
$(document).ready(function()
{
var Example = (function() {
"use strict";
var elem,
hideHandler,
that = {};
that.init = function(options) {
elem = $(options.selector);
};
that.show = function(text) {
clearTimeout(hideHandler);
$("#result").html(text);
$("#result").fadeIn();
hideHandler = setTimeout(function() {
that.hide();
}, 4000);
};
that.hide = function() {
$("#result").fadeOut();
};
return that;
}());
$('.alert').on('click',function()
{
bootbox.alert("Hello world!", function() {
Example.show("Hello world callback");
});
/*bootbox.alert(
{
title:"ashish bansal", //title which will be displayed on promt
message:"<h2>Are you Agree?</h2>",//message on promt
size:'large', //size of popup,default value is null and valid values are small and large only
className: 'bb-alternate-modal',//css class to implement transformation effect
onEscape:true,//allow escape button to dismiss promt
backdrop:true,// click on background dismiss alert
callback:function()
{
console.info("callback called successfully!");
}
});*/
});
$('.alert1').on('click',function()
{
bootbox.confirm(
{
title:"bansal",
message:"Are you Agree?",
size:'large',
buttons:
{
confirm:
{
className:'btn-success',
label: '<i class="fa fa-check"></i> YES'
},
cancel:
{
className:'btn-danger',
label: '<i class="fa fa-times"></i> NO'
}
},
callback:function(result)
{
console.info("confirm promt called successfully with result:"+result);
},
//closeButton:false// hide close button
//animate:false // by default it is true.used to animte alert in out style
});
});
$('.alert2').on('click',function()
{
bootbox.prompt(
{
title:"Select your favourite items",
message:"Welcome to world of promt messages",
size:'large',
inputType:'checkbox',
inputOptions:[{
text:'Shoes',
value:'1'
},
{
text:'Bike',
value:'2'
},
{
text:'Rose',
value:'3'
}],
inputType:'email',
inputType:'number',
inputType:'select',
inputOptions:[{
text:'Shoes',
value:'1'
},
{
text:'Bike',onEscape:true,//allow escape button to dismiss promt
backdrop:true,// click on background dismiss alert
value:'2'
},
{
text:'Rose',
value:'3'
}],
//inputType:'date',
callback:function(result)
{
Example.show("confirm promt called successfully with result:"+result);
}
});
});
$('.alert3').on('click',function()
{
bootbox.dialog(
{
message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
onEscape:true,//allow escape button to dismiss promt
backdrop:true// click on background dismiss alert
});
});
$('.alert4').on('click',function()
{
var dialog = bootbox.dialog(
{
title: 'A custom dialog with init',
message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>',
onEscape:true,//allow escape button to dismiss promt
backdrop:true// click on background dismiss alert
});
dialog.init(function()
{
setTimeout(function()
{
dialog.find('.bootbox-body').html('I was loaded after the dialog was shown!');
}, 3000);
});
});
});
Там нет ничего в вашем посте о CSS. Я не знаком с Bootbox, но похоже, что он включает в себя некоторые стили. Включили ли вы CSS из Bootbox на своей странице? – Toby
bootbox dint имел файл css :( –
Какой CSS вы включили в свой проект? Здесь есть стиль, который не исходит из Bootstrap, если вы не используете какую-то тему. Если модальный работает, то это не проблема javascript, а проблема с CSS. – Toby