Jquery: image Loader position and hiding mess up - javascript

I've got a modal dialog that pop up then load and show the loader image then after a seconds it will hide and preview the "modalLogin" page.
At first loading the main page and clicking the button for modal dialog to pop up it is fine, but when I close the modal dialog and click the button for modal again, the loading is mess up! So can anyone explain to me what is wrong?
$(href).fadeIn(100, function(){
$('#loadingImage').show(1,function(){
setTimeout( function(){
$('#loadingImage').hide(1,
function(){
if(thisId == 'loginModal' ){
$('#previewOutput').load('modalLogin.php');
//alert("Login");
}
}
);
},500);
});
});
Here the link : http://jsfiddle.net/UZ6JN/1/

Its because when you put text with .html() it stays there, if you want to see correctly then add one line in this:
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#previewOutput').html(''); //<--------add this one here
$('#mask').hide();
$('.window').hide();
});
check this out in fiddle here

Related

How to close color box popup on browser back button

I want to close my color box popup on browser's back button click.
I used an iframe and inside the iframe there are many links. When user click on particular link then a color box popup will open.
Currently after opened the popup if user click on back button then popup is not closing.
So i want such a functionality that if user click on back button then popup will be close and also page should not go to back (Disable back button).
I have used the following code but it's not working for me.
<script>
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
</script>
Please give me any suggestion to close the color box popup on back button or disable the back button completely.
You should use window.location.hash, and window.onhashchange.
Basically, after popup open, you change hash to something (like window.location.hash = "popup_opend").
Then when user clicks back, that back click will remove the hash you just added.
You just need to handle window.onhashchange to check for that and close the popup.
Of course, hope you don't have any other code that manipulate the hash.

beforeunload event and JQuery Dialog immediately closes after switch screen

Good day,
Here is the structure of my .php
Main.php
All of the navibar is here.
There's an Iframe screen also from my contents.
Content1.php
My content 1 contains textfields.
Jquery dialog if you are leaving the screens.
Content1 code :
$(window).bind('beforeunload', function(e){
dialog();
});
dialog();
$('form[name="rowform"]').on('submit', function (e) {
e.preventDefault();
});
var fieldNamesToCheck = xxxxx;
var previousValueFieldNames = xxxxx;
if (detectChangesOnInputs(fieldNamesToCheck, previousValueFieldNames)) {
$("#unsaved-values-confirmation-dialog").dialog("open");
$('.ui-dialog :button').blur();
}
for the close and refresh event, the beforeunload event does fine.
but when I start hitting my navibar,
what happen is, the dialog shows and immediately closes.
is there any wrong in my codes? thanks!

Page Reload on Button Clicked

I have a button on a page that, when clicked, loads another html file into a div in a "modal". For whatever reason, when I close the modal, the page seems to refresh and go back to the top.
function openNewWindow() {
$('.button').click(function(e) {
e.preventDefault();
$('body').addClass("noscroll");
$('#wrap').load('index.html');
return false;
});
}
openNewWindow();
$('.close-btn').click(function(e) {
e.preventDefault();
$("#wrap").empty();
$('body').removeClass("noscroll");
});
I have the preventDefault in place, but the "reload" seems to keep happening. Any issues with the script, and reason why this would be happening?
Link to my test page: http://andyrichardson.design/ajax/test.html

How to not have the page refresh when my pop-up is closed?

So I have a really simple pop-up on a page when a link is clicked, but it will refresh the page when I click on the close button. Which is bad since I have it within a set of Ajax tabs, so on refresh it goes back to tab1 instead of staying on tab3. Any idea's of a function to do this, I know there's one to make the parent page refresh, so there must be one for no refresh? Thanks!!
This is my JS
$(document).ready(function(){
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height();
var docWidth = $(document).width(); //grab the height of the page
$('.overlay-bg').show().css(); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+20+'px'}); //set the content 20px from the window top
});
// hide popup when user clicks on close button
$('.close-btn').click(function(){
$('.overlay-bg').hide(); // hide the overlay
});
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
$('.overlay-bg').hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
});
I'm guessing your close dom contains a link. In your close handler just add the event param and prevent default like you do for the other clicks.
See updated close function below
$('.close-btn').click(function(evt) {
evt.preventDefault();
$('.overlay-bg').hide();
});

hide background webpage vertical scrollbar using jquery or javascript while load of popup page

By clicking <a>click me</a> tag, the popup windows will get load. At the time background page vertical scroll bar is on visible state. How can i hide while my popup load and visible when it close.
I used below script only:
if($("#myModal").is(':visible')){ // here 'myModal' is div of popup.
$("html").css("overflow", "hidden"); // here 'html' is a background page
}
else
{
$("html").css("overflow", "visible");
}
Hide state is working properly, but visible state not working when i close the popup window.
Please give me a correct solutions.
Depends on the way you implement your modal... If for example you are using the jQuery UI
Dialog Widget you would do something like:
$("a.mylink").dialog({
open: function() {
$("html").css("overflow", "hidden");
},
close: function() {
$("html").css("overflow", "visible");
}
});

Categories