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.
Related
I have a Kendo UI grid with inline editing. I need to hide update button when edit is clicked.
{
command: [
{ name: "edit" },
{
name: "update",
click: function (e) {
savedata();
},
},
{ name: "destroy" }
],
title: " ",
width: 140,
attributes: { style: "text-align: center; color:Blue" },
},
I dont think that kendo from box have that behavior.
What can you do:
In edit command add onClick handler where you will hide other buttons:
in event arguments e there always some grid row data using which you can find current row with selector or may be just using closest
Update button in kendo always have class k-grid-update, find it and hide
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 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";
I've created this popup using
$ionicPopup.show({
title: 'Choose Location...',
buttons:[
{
text: "Current Location",
type: 'button-positive',
onTap: function(){
$scope.myLocation();
}
},
{
text: "Previous Locations",
type: 'button-positive',
onTap: function(){
$state.go('menu.listSelect');
//go to choose location page
}
},
{
text: "Address Book",
type: 'button-positive',
onTap: function(){
//go to address book
}
},
{
text: "Cancel",
type: 'button-positive',
onTap: function(){
console.log('cleek');
$scope.fillOptionPopup.close();
}
},
]
});
};
This places the buttons created next to each other like so
Is there a way to make the buttons so they stretch across the width of the popup and each button is on a new line using that format of creating buttons for the popups?
I've used this code in place of the buttons array and it gives me this, which is what I want. But the ng-click isn't calling the functions that I made out of the ontap's from the array.
template: '<button class="button button-positive" ng-mousedown="goMyLocation()">Current Location</button><br>'+
'<button class="button button-positive" ng-mousedown="goMenuList()">Previous Locations</button><br>'+
'<button class="button button-positive" ng-mousedown="goAddressBook()">Address Book</button><br>'+
'<button class="button button-positive" ng-mousedown="closePopup()">Close</button>'
Is there a way to get the buttons to be one per row and a full width of the popup?
There actually another option that I find "cleaner".
In the object passed to the show method you can also define a css class for the popup, so you can use it to override the default ionic styles.
Specifically for your use case:
.popup-vertical-buttons button
{
min-width: 100%;
margin-bottom: 5px;
}
.popup-vertical-buttons .popup-buttons
{
display: block;
}
and in the object use pass to the show method add:
cssClass: "popup-vertical-buttons"
For anyone interested, this is how I did it...
Before the buttons property, add cssClass: 'popup-vertical-buttons' so that it looks something like this:
$ionicPopup.show({
tite: 'Some Title',
cssClass: 'popup-vertical-buttons',
buttons: [
...
]
});
Then in your CSS add these two lines:
.popup-vertical-buttons .popup-buttons {
display: block;
}
.popup-vertical-buttons .popup-buttons .button{
display:block;
min-width: 100% !important;
}
Ok, now that I read the entire question I can help you. The first code snippet will never do what you want without modifying the popup CSS because of the default popup layout
In order for the second layout to work (using the template) you need to pass the scope parameter to your popup, so the buttons are linked to the scope holding the functions
https://ionicframework.com/docs/v1/api/service/$ionicPopup/
I want to display the popup message without any buttons. The message disappears if you tap on it. The code works fine and was taken from Sencha Touch 2: tapping Ext.Msg.show that have no buttons, thank you Viswa.
Ext.Msg.show({
title: 'Title',
message: 'Some text goes here...',
itemId : 'showMsg',
buttons : [],
listeners:[
{
element: 'element',
delegate: '',
event: 'tap',
fn: function() {
this.hide();
}
}]
});
How to make it disappeared when you tap anywhere on the screen, not on the popup message?
You can use the hideOnMaskTap config.
hideOnMaskTap: true