I just want to show modal on another modal. (Close current one and needs to open new one) So I used
Register here
data-dismiss="modal" I try with this attribute end of link and it's woking fine. The problem is that the second modal height is bit higher. I can't scroll down to see it's upper content. and input fields looking weird. Please see this image.
Is there any other way to show modal when another modal by closing first modal?
try this
$('#myModal-1').on('hidden.bs.modal', function (e) {
$('#myModal-2').modal('show');
});
https://jsfiddle.net/princesodhi/ru2rz404/
Related
i have a panel in a page, and in the panel header i have a red delete btn, the panel content contains a form which has a few btns (the red delete btn is not in the form, but its linked to the form via the form="abc" attribute).
in the pic below, When i click the btns in the form, it'll post some values. Before i submit a form (the pink remind button), my red delete button looks like this ( nice and rounded)
enter image description here
but after submit, it became out of shape. ( btn height changed). This only happens after i submit and didnt reload the page, if i reload the page or redirect the page back to itself, then the delete btn will return to its normal shape.
enter image description here
i did not alter the classes of the btns using js or jq, the only thing that happens after i submit are some php scripts which shouldnt affect aesthetics. Also, the panel is reloaded every 5 seconds within the page to update its content, but the whole page itself is not reloaded, so if its html or bs4 issue, then after i submit form, the delete btn should return to normal shape after 5 sec, but it seems like something outside of the panels but within the page needs to be reloaded to change the delete btn back to normal shape. I checked the deletebtn and the parent elements in inspect before submit, after submit, and after reload page, but everything is the same, except that it shows the height px are different.
Can you post snippet of your code?
Alternatively just give inline style attribute to the button and specify height, width, padding etc.
In Bootstrap Modal Popup Tab order not moving to Datatable Header?
Without Datatable ,In modal popup shift+tab order is going out of the popup dialog. It needs to be inside of the Modal dialog.
Check this fiddle, try adding tabindex to the modal element
All of the answers and comments are wrong in here. This "bug" is also occurs in antd-Modal. Somehow, shift+tab combination goes outside of the modal and you can select and type(in input elements for example) everything behind the modal.
For now, seems like there is no fix for this.
Pressing button will disappear, and the next button appears in HTML-
I want to create 5 buttons When the first button in a specific location. Only after the user clicks on the first button, then the user will see the second button which is in a different location.The same applies to all the buttons.
I RUN IT HERE:
http://bit.ly/1lkoLSK
another problem that the code run only on firefox-why ?
I don't know if i understand your problem correctly, but show first button, than on click just hide current active element and show next one. JSFiddle
$('button').click(function(){
$(this).hide();
$(this).next.show();
});
I'm making a simple WordPress theme and I wanted to include a jQuery Sidr into and I got that done properly, however the menu icon that pulls the slide-in sidebar disappears behind the sidebar leaving the user with no way to collapse the sidebar again.
The theme is far from complete (and I was working on it using an offline WP setup) but I put it up here temporarily for the sake of this question: http://sweven.vhbelvadi.com
The menu icon in question is on the top-right. I have given it top and right properties, floated it right, as well as given it a fixed position to make it stay there.
As I said, the design is far from complete, so take no notice of it, but once you click on the icon to slide out the sidebar area, the menu icon disappears.
I have tried giving it a z-index which works, putting the menu button on top and makes it accessible, but you cannot see it on the link above because I removed it; didn't like the look of it.
Basically, I'd like to know if there's any way of changing the attribute (focus, active don't seem to work) or do anything else so once the sidebar opens the menu icon slides out alongside it.
What is my solution?
Thanks.
Update:
Right now I'm using the following code at the link above:
$(document).ready(function(){
$('span.genericon').on('click', function(){
$('#simple-menu').sidr({side: "right"});
$('span.genericon').css({
right: "6.5em"
}, 500);
});
});
It works, but how would I return the menu icon to its original place?
The collapse button is there but when the sidebar opens, the button goes behind it, so you need to change the CSS based on whether sidebar is visible or hidden, so use a kind of toggle like below.
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Demo
Demo 2 (by Patrick)
When you trigger the jQuery to move the menu to make it slide out, use the jquery animate command to change the "right" property of this menu icon (.genericon.genericon-menu) to 270px.
So, something along the lines of this:
$(document).ready(function(){
$('.genericon.genericon-menu').on('click', function(){
$('#idofmenu').//code to move the menu out;
$('this').animate({
right: "270px"
}, 500);
});
});
And then vice versa for when the menu collapses.
I'm trying to work around a webview issue on Android devices using Select drop down menus, using instead radio buttons in a popup to make user selections
What I need though is for the button text to change according to the selection the user has made. I've put togetaher a Fiddle of what I thought would work, but it's not playing ball, and I was wondering if any wiser heads out there could offer some advice.
Fiddle here;
http://jsfiddle.net/vinomarky/gEXhD/
Note: I've currently added some alerts in there when the javascripts fire, but they are not firing, and am not sure why not.
Question 1:
How to change the button text to match the user selection
Question 2:
How to make the radio selection minimize as soon as a user has made a selection, without having to click off the radio
Thanks in advance
you can use jquery click event instead of using onclick attribute
because you use jquery mobile ui, to change button text you should change button text container value not pressure_cands itself
and to hide popup screen when an item selected call click event of popupBasic-screen div
$('#updown1').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('THP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
$('#updown2').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('FBHP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});