I have a simple bootbox / javascript confirm window at:
https://www.guard-gate.com/test2/index.html
How do I make the Success button link to google, the Danger button link to yahoo.com and the Click Me button close the box?
How do I change the position of the window to get it in the middle of the page?
You could try something like this for setting the modal in the middle:
var windowHeightCalc = $(window).height() / 2,
modalHeightCalc = $('.modal-content').height();
$('.modal').css({ 'margin-top': [windowHeightCalc - modalHeightCalc, 'px'].join('') });
You don't really need Bootbox for making the modal just use the default Bootstrap modal - http://getbootstrap.com/javascript/#modals
You can modify it and change the links as you wish. To open it simply run:
$('#myModal').modal('show');
and to hide it:
$('#myModal').modal('hide');
In Bootbox you could try using that what the documentation advise you:
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
Example.show("great success");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
Example.show("uh oh, look out!");
}
},
main: {
label: "Click ME!",
className: "btn-primary",
callback: function() {
Example.show("Primary button");
}
}
}
});
In the callbacks you could do everything. For JS-redirects you can do:
window.location.href = "http://whatever.com";
Related
I'm confused. I can open the modal using this:
onNext: function() {
$('#modal').modal('toggle');
}
But I can't close the modal with the same function with another $('#modal').modal('toggle'); or $('#modal').modal('hide').
I even tried creating a registerHelper but it still doesn't.
hopscotch.registerHelper('closeModal', function() {
$('#modal').modal('toggle');
});
Oops, I made a mistake. I can close the modal using the onEnd setting.
var tour = {
id: 'tour1',
steps: [{
target: 'Target',
title: 'Target Title',
content: 'Target Content'
}
],
onEnd: ["closeModal"]
}
Made a callback helper to close the modals.
hopscotch.registerHelper('closeModal', function() {
$('.modal').modal('hide');
});
I have following bootbox confirm modal:
bootbox.confirm(
"some inputs that I append to modal",
function (result) {
if (result) {
code...
}
});
How can I change default buttons to the following code?
Try to check out the documentation of bootbox.js
They even include an example of modifying the default buttons in a confirm dialog:
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});
The following page shows all the documentation.
http://www.jqueryscript.net/other/Tiny-Feature-rich-jQuery-Dialog-Popup-Plugin-ZLDialog.html
I have no trouble getting simple (OK) dialogs to work. However, there is no example of a Yes/No dialog and all my attempts to get it work have failed.
As James mentioned in the comment under your post, it would be helpful to have an example of your failed attempt. That said, here is a fiddle showing a basic example with a callback on confirm:
http://jsfiddle.net/iamjpg/avcLrtzd/
$("#demo-dialog-callback").click(function() {
$.dialog({
content: "Dialog with callback",
hideX: true,
drag: false,
lock: false,
closeBack: function() {
$.dialog.message({
content: "Callback content"
});
},
buttons: [{
text: "Click me"
}]
});
});
var myDialog = $.dialog.confirm({
content: "Do you want to continue?"},
function () {
$.dialog.message({
content: "Yes",
timeout:1000
});
myDialog();
}, function () {
$.dialog.message({
content: "No",
timeout:1000
});
myDialog();
});
I am using bootbox plugin for my application.
http://bootboxjs.com/
Something like this
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
Example.show("great success");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
Example.show("uh oh, look out!");
}
},
main: {
label: "Click ME!",
className: "btn-primary",
callback: function() {
Example.show("Primary button");
}
}
}
});
The problem what i have is that is modal is opened and something dynamically is added to message when modal is opened, it goes down of the page, but opacity element black stay the same?
Please check picture with a problem i have :(
This is more of a Bootstrap Modal issue than Bootbox specifically.
The cleanest solution is to constrain the content of your modal, rather than try to override how Bootstrap's overlay works. So, here's an example jsFiddle with a lot of content: https://jsfiddle.net/17jLxr2n/
If we add a simple CSS ruleset to our container, we can easily constrain the modal to a usable size, as shown in the updated fiddle:
.dynamic-modal-content
{
max-height: 300px;
overflow: auto;
}
The selector you use should be whatever container your dynamic content is returned with.
I am using bootbox dialogs for confirming before deleting records.
here is my jQuery script for confirmation before deleting record.
<a class="btn btn-xs btn-danger" id="deleteContent" title="Delete">delete</a>
$('#deletec').click(function (e) {
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
}
}
}
});
});
it is showing correct dialog but the record being deleted without taking confirmation, can anyone please tell me how can i prevent deletion of record without confirmation ? Thanks in advance.
You can not do what you want because the modal dialog that you are using has no way of pausing the click action. You would need to have to cancel the click action and than make that call.
One way is just to unbind click and call it again
$('#deleteContent').on("click", function (e) {
e.preventDefault();
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
$('#deleteContent').off("click")[0].click();
}
}
}
});
});
As I said in my comments above, making a delete request with a get is a BAD idea. If a user has a plugin that prefetches pages, say goodbye to all your data in the database.
What happens in the code
e.preventDefault(); Cancels the click event so it will not go to the server
$('#deleteContent').off("click") //removes the click event so it will not be called again
[0].click() //selects the DOM element and calls the click event to trigger the navigation