div에서 멀리 떨어져있을 때 전환 닫기

Question

입력을 클릭 할 때 열리는 캘린더가 있으며 십자가 (<a href="javascript:closeCalendar('CalendarForm1');">X</a>)로 닫을 수 있습니다. 페이지의 아무 곳이나 클릭하면 캘린더를 닫아야합니다. 유래에 대한 다양한 방법을 시도하지만 난 원래 스크립트 충돌이 생각 나는 때 외부 사업부의 닫 나는 closeClaendar 기능에 추가 할 수있는 뭔가가 추측하고있어

 function closeCalendar(calendarId) { 
     $("#" + calendarId).hide(); 
    } 

    function CalendarMonthChanged(contract, product, dropdtls, form, ticketType, dateselectorid) { 

     $calendar = $("#CalendarWrapper"); 

     var loader = '<%= Html.StaticImage(Url, "ajax-loader.gif") %>'; 
     $calendar.find(".table").html("<div class = 'calendar-loading' style='width:175px;'><img src = '" + loader + "' /></div>"); 

     var qty = 2; 

     var dataArray = { 
      contract: contract, 
      productId: product, 
      dropdtls: dropdtls, 
      formNumber: form, 
      ticketType: ticketType, 
      numTickets: qty, 
      dateSelectorId: dateselectorid 
     }; 

     $.ajax({ 
      type: "POST", 
      url: '<%= Url.Action("Calendar", "productapi", null) %>', 
     data: dataArray, 
     success: function (response) { 
      $calendar.html(response); 
      toggleLayer("CalendarForm1"); 
     } 
    }); 
    } 


<div id="CalendarWrapper"> 
<div id="Allocation"> 
    <div id="CalendarForm1" class = "CalendarForm" style="display:none;"> 
     <div class="allocation_form bg"> 
      <div class="calendar_header"> 
       <a href="javascript:closeCalendar('CalendarForm1');"> 
        <span class="m-xs-10 halflings remove red"></span> 
        </a> 


         <select name="calendar_month" class="form-control" onchange="CalendarMonthChanged('<%= Model.ContractID %>','<%= Model.AWItemId %>',this.value,'<%= Model.FormNumber %>', '<%= Model.TicketType %>', <%= (int)Model.DateSelector %>); "> 
          <%= Model.Months %> 
         </select> 


      </div> 
      <div id="Loading" class="Loading" style="width:175px;height:172px;display:none;"></div> 
      <%= Model.Days %> 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

을이을 시도해보십시오.?

을

$(document).click(function(){ 
    if($("#" + calendarId).is(':visible')){ 
    $("#" + calendarId).hide().css("visibility", "hidden");; 
    } 
}); 

앵커에도 클릭하십시오. g 다시 일정을 숨기고 피하기 위해 :

이

$(document).on('click', 'a', function (e) { 
    //show calendar 
    $("#" + calendarId).show() 
    e.stopPropagation(); 
}); 

or instead of e.stopPropagation(); you can also use e.preventDefault(); 

Answer 2

여기 document에 click 핸들러를 추가하여 하나 쉬운 방법입니다.

jsFiddle : http://jsfiddle.net/6pcq7pvo/3/

$(document).on("click", function (e) { 
 
    if ($("#calendar").is(":visible") && !$(event.target).is('#calendar *, #calendar')) { 
 
     // user clicked somewhere in the document but not inside the calendar 
 
     $("#calendar").hide(); 
 
     $("#btnOpenCalendar").show(); 
 
    } else if (event.target.id === "btnOpenCalendar") { 
 
     // user clicked the "Show calendar" button 
 
     $("#btnOpenCalendar").hide(); 
 
     $("#calendar").show(); 
 
    } 
 
    else if ($(event.target).is('#calendar span')) 
 
    { 
 
     // user clicked a date in the calendar 
 
     // for demo purposes only; normally your calendar plugin handles this for you 
 
     alert("Clicked date: " + $(event.target).text()); 
 
    } 
 
});

#calendar { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
    background-color: #ccc; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 
#calendar span { 
 
    display: inline-block; 
 
    width: 17px; 
 
    border:1px solid #ddd; 
 
    cursor: pointer; 
 
} 
 
#btnOpenCalendar { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>click anywhere in this frame, but outside of the "calendar" (gray box) to close calendar</h3> 
 
<div id='calendar'><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span> 
 
</div> 
 
<input id='btnOpenCalendar' type='button' value='Show calendar' />