Ukryj DIV po kliknięciu poza

Mam system formularza, który jest generowany dynamicznie.Ukryj DIV po kliknięciu poza

Poniższy kod jest przyciskiem wywołującym kalendarz.

<input id="btn1_0" type="button" value="☵" class="rsform-calendar-box btnCal rsform-calendar-button btn btn-default" onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');">

Oto div, które pojawia się po kliknięciu przycisku powyżej. Przycisk przełącza styl display:none gdy kliknięciu wewnątrz div:

<div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> 
Calendar Here 
</div>

chcę ukryć kalendarz, gdy ktoś kliknie poza div też.

Próbowałem tego JS, ale nie będzie działać, jak ustawia display:none na div. Co ja robię źle?

jQuery(document).click(function(event) { 
    if (!jQuery(event.target).hasClass('yui-calcontainer')) { 
     jQuery(".yui-calcontainer").hide(); 
    } 
});

Źródło

2016-08-27 Elaine Byene

dać mi znać, jeśli moja odpowiedź była pomocne dla Ciebie. –

Wygląda na to, że próbujesz użyć biblioteki YUICalendar, w którym to przypadku może korzystać również zapoznać się na oficjalnej dokumentacji @https://developer.yahoo.com/yui/calendar/

znalazłem przykład, że może osiągnąć to, czego "Próbujemy osiągnąć: https://developer.yahoo.com/yui/examples/calendar/calcontainer_clean.html

Źródło

2016-08-27 04:44:39 Sterling

Nie można powiązać zdarzenia kliknięcia z dokumentem. Przywiąż go do ciała.

jQuery('body').click(function(event) { 
    if (!jQuery(event.target).hasClass('yui-calcontainer')) { 
     jQuery(".yui-calcontainer").hide(); 
    } 
}); 

or 

jQuery(document).on('click', 'body', function(event) { 
    if (!jQuery(event.target).hasClass('yui-calcontainer')) { 
     jQuery(".yui-calcontainer").hide(); 
    } 
});

Źródło

2016-08-27 04:51:18 depiction

Próbowałem obu rozwiązań, a wynik jest taki sam. Po dodaniu twojego JS, domyślny status zmienia się na "

", więc przycisk nie działa, ponieważ domyślnie wyświetlany jest 'display; none'. –

Dodaje wyświetlanie brak, dlatego ten kod JS działa, więc coś innego jest przyczyną. Nie znam formatu YUICalendar, ale możesz spróbować wywołać tę samą funkcję showHide, która znajduje się na przycisku (RSFormPro.YUICalendar.showHideCalendar ("cal1_0Container")) w JS, gdy cel ma klasę "yui-container". – depiction

div jest również wywoływany przez przycisk z jego funkcją: 'onclick =" RSFormPro.YUICalendar.showHideCalendar ('cal1_0Container'); "' który przestaje działać po dodaniu twojego javascript. –

Można użyć jakiś trik takiego, sprawdzić ten kod poniżej

$(document).dblclick(function (e) 
 
           { 
 
       var container = $(".yui-calcontainer"); 
 
       if (!container.is(e.target) // if the target of the click isn't the container... 
 
        && container.has(e.target).length === 0) // ... nor a descendant of the container 
 
       { 
 
        container.hide(); /// or container.toggle(); to show/hide 
 

 
       } 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body style="height:100% ; width:100%;";> 
 

 
     <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> 
 
      Calendar Here 
 
     </div> 
 
    </body>

użytku container.toggle(); na pokaz/ukryć

dać mi znać, jeśli jest to pomocne dla ciebie.

To był mój html

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script> 
      $(document).dblclick(function (e) 
           { 
       var container = $(".yui-calcontainer"); 
       if (!container.is(e.target) // if the target of the click isn't the container... 
        && container.has(e.target).length === 0) // ... nor a descendant of the container 
       { 
        container.toggle(); 
       } 
      }); 
     </script> 
    </head> 
    <body style="height:100% ; width:100%;";> 

     <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> 
      Calendar Here 
     </div> 
    </body> 
</html>

Źródło

2016-08-27 05:18:34

Gdzie powinienem dodać 'container.toggle();'? Nie mogę zmienić wygenerowanego formularza! Mogę użyć tylko id lub klasy dostępnego formularza. –

Dziękuję za twój wysiłek. Naprawdę to doceniam i głosowałem. Jednak nie zrozumiałeś mojego pytania :( –

Ukryj DIV po kliknięciu poza

Odpowiedz

Powiązane problemy