Pop-up : Login Sign Fadein Fadeout

[thepseud]

Ciao a tutti e ben trovati, non sapendo dove sbattere la testa ho deciso di iscrivermi spero anche di poter dare il mio contributo.

Problema:
ho una pagina Aspx --> Deafult.aspx, la home del sito
Al click su login mi apre un pop-up , dove c'è la sezione Login e Sign: con javascript controllo l'evento open e close

Il problerma è che sulla parte login mi mostra anche la parte Sign : sembrerebbe che il fadeout del Login non funzioni molto bene, solo sulla default.aspx, se vado sulle altre pagine e richiamo il login le sezioni si vedono bene --> NON CAPISCO PROPRIO DOVE SBAGLIO !!!

Dettaglio: Nella immagine di seguito sulla parte Login mi mostra anche il SIgn

Login.PNG

Di seguito i dettagli:


Default.aspx:

 <div class="popup popup--left">
                                    <a title="Close" href="#" class="popup__close">
                                        <i class="las la-times la-24-black"></i>
                                    </a><!-- .popup__close -->
                                    <div class="popup__content">
                                        <div class="popup__user popup__box open-form">
                                            <a title="Login" href="#" class="open-login">Login</a>
                                            <a title="Sign Up" href="#" class="open-signup">Sign Up</a>
                                        </div>

...............


Main.js (il javascript che richiamo)

$('.popup-background').on('click', function (e) {
            e.preventDefault();
            $(this).fadeOut();
            $(this).parents('.site-header').find('.popup').removeClass('open');
        });

        $(document).on('click', '.open-login', function (e) {
            e.preventDefault();
            $('.popup--left').removeClass('open');
            $(this).parents('#wrapper').find('.nav-login').addClass('active');
            $(this).parents('#wrapper').find('.form-log').fadeIn(0);
            $(this).parents('#wrapper').find('.nav-signup').removeClass('active');
            $(this).parents('#wrapper').find('.form-sign').fadeOut(0);
            $(this).parents('#wrapper').find('.popup-background').fadeIn(0);
            $(this).parents('#wrapper').find('.popup-form').toggleClass('open');
        });

        $('.open-signup').on('click', function (e) {
            e.preventDefault();
            $('.popup--left').removeClass('open');
            $(this).parents('#wrapper').find('.nav-signup').addClass('active');
            $(this).parents('#wrapper').find('.form-sign').fadeIn(0);
            $(this).parents('#wrapper').find('.nav-login').removeClass('active');
            $(this).parents('#wrapper').find('.form-log').fadeOut(0);
            $(this).parents('#wrapper').find('.popup-background').fadeIn(0);
            $(this).parents('#wrapper').find('.popup-form').toggleClass('open');
        });

Help me ...

[KillerWorm]

Ciao e benvenuto/a sul forum.
I selettori jQuery dello script in dettaglio si riferiscono ad elementi non menzionati nel poco codice Html da te postato. Difficile capire la/le causa/e del problema senza vedere l'intero contesto. Se ti è possibile, prova a postare il link della pagina in questione.

[thepseud]

Ciao e benvenuto/a sul forum.
I selettori jQuery dello script in dettaglio si riferiscono ad elementi non menzionati nel poco codice Html da te postato. Difficile capire la/le causa/e del problema senza vedere l'intero contesto. Se ti è possibile, prova a postare il link della pagina in questione.

Innanzitutto grazie per la risposta e scusami se rispondo solo ora

Ma non riesco a caricare l'altro file javascrit file in allegato : scrivo in parte qui

main.js :

(function ($) {
"use strict";
$(document).ready(function () {

/* [ jQuery Countdown ]
- - - - - - - - - - - - - - - - - - - - */
setInterval(function () {
var obj = $('.countdown-data');
obj.each(function () {
var end = $(this).data('end');
var gmt = $(this).data('gmt');
var d = new Date();
var n = d.getTime();
var n = Math.floor(n / 1000);
var cd = end - (n + (gmt * 3600));
var days = hours = minutes = seconds = 0;
if (cd > 0) {
var sec_num = parseInt(cd, 10);
var days = Math.floor(sec_num / 86400);
var hours = Math.floor(sec_num / 3600) % 24;
var minutes = Math.floor(sec_num / 60) % 60;
var seconds = sec_num % 60;
if (seconds < 10) {
var seconds = '0' + seconds;
}
if (minutes < 10) {
var minutes = '0' + minutes;
}
}
$(this).find('.days').text(days);
$(this).find('.hours').text(hours);
$(this).find('.minutes').text(minutes);
$(this).find('.seconds').text(seconds);
});
}, 1000);

/* [ Main Menu ]
- - - - - - - - - - - - - - - - - - - - */
var sub_menu = $('.sub-menu');
sub_menu.each(function () {
$(this).parent().find('> a').addClass('has-child').append(' <i class="la la-angle-down la-12"></i>');
});

// Check Sub Menu
$('.right-header .sub-menu').each( function() {
var width = $(this).outerWidth();

if( width > 0 ) {
var offset = $(this).offset();
var w_body = $('body').outerWidth();
var left = offset.left;
if( w_body < left + width ) {
$(this).css('left', '-100%');
}
}
});

$('.has-child').on('click', function (e) {
e.preventDefault();
$(this).toggleClass('open');
if($(this).closest(".sub-menu").length <= 0) {
$('.menu-arrow .has-child').not(this).parent().find(' > .sub-menu').slideUp('fast');
}
$(this).parent().find(' > .sub-menu').slideToggle('fast');
if (!$(this).hasClass( 'open' )) {
$( this ).parent().find( '.has-child' ).removeClass( 'open' );
}
});

$('.site__menu__icon').on('click', function (e) {
e.preventDefault();
$(this).parents('.site-header').find('.popup-background').fadeToggle();
$(this).parents('.site-header').find('.popup--left').toggleClass('open');
});

$('.minicart__open').on('click', function (e) {
e.preventDefault();
$(this).parents('.site-header').find('.popup-background').fadeToggle();
$(this).parents('.site-header').find('.popup--right').toggleClass('open');
});

$('.popup__close').on('click', function (e) {
e.preventDefault();
$(this).parents('.site-header').find('.popup-background').fadeOut();
$(this).parent().removeClass('open');
});

$('.popup-background').on('click', function (e) {
e.preventDefault();
$(this).fadeOut();
$(this).parents('.site-header').find('.popup').removeClass('open');
});

$(document).on('click', '.open-login', function (e) {
e.preventDefault();
$('.popup--left').removeClass('open');
$(this).parents('#wrapper').find('.nav-login').addClass('active');
$(this).parents('#wrapper').find('.form-log').fadeIn(0);
$(this).parents('#wrapper').find('.nav-signup').removeClass('active');
$(this).parents('#wrapper').find('.form-sign').fadeOut(0);
$(this).parents('#wrapper').find('.popup-background').fadeIn(0);
$(this).parents('#wrapper').find('.popup-form').toggleClass('open');
});

$('.open-signup').on('click', function (e) {
e.preventDefault();
$('.popup--left').removeClass('open');
$(this).parents('#wrapper').find('.nav-signup').addClass('active');
$(this).parents('#wrapper').find('.form-sign').fadeIn(0);
$(this).parents('#wrapper').find('.nav-login').removeClass('active');
$(this).parents('#wrapper').find('.form-log').fadeOut(0);
$(this).parents('#wrapper').find('.popup-background').fadeIn(0);
$(this).parents('#wrapper').find('.popup-form').toggleClass('open');
});

$('.choose-form a').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$(this).parents('.popup').find('.form-content').fadeOut(0);
$(this).parents('.popup').find(id).fadeIn(0);
$('.choose-form li').removeClass('active');
$(this).parent().addClass('active');
});

$('.search-open').on('click', function (e) {
e.preventDefault();
$(this).parents('.site-header').find('.site__search').toggleClass('open') ;
});

$('.search__close').on('click', function (e) {
e.preventDefault();
$(this).parents('.site-header').find('.site__search').removeClass('open') ;
});

[KillerWorm]

Ripeto, è difficile riprodurre il problema in questo modo. Se hai la pagina online e accessibile pubblicamente, posta direttamente il link.

In alternativa prova a fornire online un esempio minimo riproducibile in cui sia possibile osservare il problema in questione. Forse potrebbe esserti utile adoperare qualche code playground (CodePen, JSFiddle o altro).

[thepseud]

Ripeto, è difficile riprodurre il problema in questo modo. Se hai la pagina online e accessibile pubblicamente, posta direttamente il link.

In alternativa prova a fornire online un esempio minimo riproducibile in cui sia possibile osservare il problema in questione. Forse potrebbe esserti utile adoperare qualche code playground (CodePen, JSFiddle o altro).

Ok provo a metterla online grazie mille ti aggiorno a breve

[ciro78]

ciao thepsedu,
benvenuto sul forum.

Ti invito, qualora non lo avessi già fatto, a prendere visione del regolamento ed in particolare della sezione titolo e l'utilizzo del tag code.

Grazie