I am trying to hide a modal, but the modal is going away and the backdrop is staying put and not allowing me to click anything. I have to refresh the entire page for it to work
Here is my code:
$("#AddNewOrganizationModal").modal('hide');
It seems to work in all my other modals, but I cannot pin point why this one is not being closed:
Here is the class that is showing up still:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #1a1a1a;
}
Is there a way to remove this class just in general?
This ONLY happens when I'm on the development web site. Locally it works fine and closes without any issues.
Could something be caching on azure dev ops?
The way that Bootstrap modals are structured, the backdrop is part of the modal container.
Here's some pseudo-code to demonstrate what I mean:
<modal-wrapper>
<modal-backdrop>
<modal-container>
content of modal
</modal-container>
</modal-backdrop>
</modal-wrapper>
The element to which you want to apply the hide function is <modal-wrapper>. When you hide that, the <modal-backdrop> will also be hidden.
You are probably hiding <modal-container> instead, and so <modal-backdrop> is still displayed.
I've encountered the same issue and had to manually force the backdrop to hide during the modal hidden event. Code similar to this:
$('#myModal').on('hidden.bs.modal', function (e) {
$('.modal-backdrop').hide();
});
This ended up being the answer:
$('.modal-backdrop').fadeOut(150);
Related
I'm building a sandbox app in Angular and I want to use a modal in a component nested within a component.
The modal toggles on just fine, but it sits behind it's own backdrop - which is understandable. The docs recommend to use it as 'top level' in the HTML as possible, but is there any way to use custom CSS to force the functionality of the modal?
Thus far I've tried:
.modal {
z-index: 1701 !important;
}
.modal-backdrop {
z-index: 1700 !important;
}
.modal.show .modal-dialog {
z-index: 1702 !important;
}
And I can see that they are the rules being applied in the dev tools, but it still appears behind the backdrop and other components higher up in the DOM tree.
It will probably be better if you shared more code here (are there additional classes here? How did you instantiate the modal?)
Either way, check out this example:
http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
Should be relatively easy :)
I'm trying to add a google maps autocomplete input to my ionic app. It works pretty well except when I scroll. As shown on the image:
So I tried different things like changing the position of .pac-container but it doesn't solve the problem.
When I inspect the page, it seems that the results container loads at the end of the page, so it's not easy to make the block stick to the input bar.
I already searched everywhere and didn't fidn any suitable solution ? Does someone have an idea how to do it ?
(It's actually just a simple code like this:
function initialize() {
var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
options
);
}
initialize();
jsfiddle
Thanks
I have the same problem. My solution was:
$('#inputContainer').scroll(function(){
//Set new top to autocomplete dropdown
newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
$('.pac-container').css('top', newTop + 'px');
});
This update the dropdown position when container scrolls.
I just encountered the same problem when I was implementing the Autocomplete on a form inside a scrollable modal. If you only have one Autocomplete object then the solution is relatively easy.
First make sure that your element's parent has a relative position.
Then you need to select the .pac-container and append it to the parent.
$("#autocomplete").parent()
.css({position: "relative"})
.append(".pac-container");
Finally set the .pac-container left and top position to be below your element. This needs to be done in a stylesheet with the !important declaration to ensure it overrides the inline styles set by Google's code.
// these values will need to be calculated based on your layout
.pac-container {
top: 40px !important;
left: 0px !important;
}
This obviously wont work if you have multiple Autocomplete objects on a single page. Luckily I figured out a way to handle that scenario and recently published it in a jQuery plugin designed to make autocompleting address forms a breeze.
I got the solution check the example no issue with position bug when scroll
function initAutocomplete() {
//....codes...
//....add this code just before close function...
setTimeout(function(){
$(".pac-container").prependTo("#mapMoveHere");
}, 300);
}
https://codepen.io/gmkhussain/pen/qPpryg
In my case, I had to set the css as html,body{overflow-x:visible;} to make the pac-container fixed to the input field.
I was now able to reproduce the problem, the solution is simply adding position: relative to your wrapper box and position: absolute to your #autocomplete input.
I got the solution checking the example provided by the Google team.
I've updated your fiddle to match the solution, but it goes like this:
Your updated CSS:
.box {
position: relative;
height: 200vh;
}
#autocomplete {
width:350px;
position: absolute;
}
Since my input field is inside "ion-content", I implemented Nicolas Pennesi
's answer with ion-content's method:
onScroll($event) {
// his code here
}
I'm building a single page, offline html5 web application using jquery mobile, backbone, underscore and tbd templating engine.
I'd like to create a lockscreen that looks similar to the native iPhone lockscreen. Before I go reinvent the wheel has anyone seen anything like this before? I haven't been able to find an example of this.
Thanks!
Edit: Oh no, it's an old question!
Add a fixed-position, hidden div to your page. When you need to activate the lock screen, use jQuery to programmatically show it:
CSS
div#lockscreen {
width: 0;
height: 0;
position: fixed;
top: 0;
left: 0;
display: none;
}
jQuery
$(document).ready(function() {
//hypothetical activation control
$("#lock").click(function() {
$("#lockscreen").css("width", "100%");
$("#lockscreen").css("height", "100%");
$("#lockscreen").css("z-index", "1000");
//or dynamically generate z-index value
$("#lockscreen").fadeIn();
});
});
Well it's been dredged up now, so I might aswell add this. Use <input type="text" pattern="[0-9]*" /> on a text field to get a numeric input. Not quite the same, but easier than using a full keyboard, and easier than coding the whole keypad yourself.
I have a Home.html that has a login form that POSTS to login.aspx
the login.aspx takes a hell lot of time to load...
so i want to have a javascript based function where the instant i click Login Button,
a loader must be shown ...while in the background the POST happens and then aspx page must get loaded and then the modal must redirect to the aspx page.
similar to gmail.com login loader..... but only using javascript. (i am also using a minified jquery js ) (NO aspx pages in between)
Please note that i cannot use any asp based loader!
I have tried using :
http://blogs.msdn.com/naitik/archive/2008/07/31/show-loading-message-while-web-page-is-processing.aspx
(it does not work fast. it first redirects to the POSTed page )
Thanks in advance..
If you just want to show a "Please wait...", attach yourself to the forms "onsubmit" event. Then show the "please wait" message (make a DIV visible). When you are done, the form will be submitted and wait for login.aspx.
If you want to have a progress bar, you have two ways of doing it:
* Either post to a hidden iframe which will load login.aspx.
* Or use an XmlHttpRequest to load login.aspx.
In both cases, login.aspx has to spit out messages (pieces of JScript or DIVs you interpret on the client) which update your progress bar.
You will find plenty of examples in Google. Try "jscript progress bar aspx" for instance.
René
Check out the following link, as it is the needed code, styling and layout for a "Loader".
I have used the code and it works 100%
You need a Div on your page:
<div class="modal"></div>
a bit of CSS styling for the div:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
speak for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://sampsonresume.com/labs/pIkfp.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
And then lastly a bit of javascript to start and stop(hide and display) the loader:
START:
$(this).addClass("loading");
STOP:
$(this).removeClass("loading");
Source: http://jsfiddle.net/jonathansampson/VpDUG/170/
This is all being done in an ASP.NET web forms application:
I need a modal popup that will show the user a preview of images that match a search criteria (e.g. they search for "dog" and the popup shows them all dog-related pictures). The search results shouldn't be too long, but the popup should support the ability to scroll if necessary. I also need to capture which image they selected and send that info back to the calling page.
I've taken a look at some of the options out there and am having a hard time deciding on which one to use. Any suggestions?
i prefer the use of jquery because it doesnt require the use of any server-side computations. also if the app ever ported to another technology other than asp.net it will still most likely work.
I'm happy with jqModal, the plugin it's really minimalistic (basically 2.97kb of JS, and 496bytes of css) and works great...
don't use any modal plugins, create your own.
<div id="modal"></div>
modal { position: absolute; top: 200px; left: 200px; z-index: 12; width: 200px; height: 100px; background: red; color: blue; }
Then you can have some javascript on it, I recommend jquery's draggable, and then put some element that you can click on it so it disappears.
Voilà!!!
I've been quite happy with the jQuery plug-in Simple Modal.
I'd say go with ours; Ajax Calendar Starter-Kit (click the button to the lower left corner) but then again I am definitely biased...