關閉切換從DIV

Question

點擊離開時，我已經被點擊輸入時打開了，並且它可以通過交叉閉合（<a href="javascript:closeCalendar('CalendarForm1');">X</a>。我需要的日曆點擊頁面上的任何位置時關閉的日曆。我有嘗試＃2的各種方法，但我認爲有與原來的腳本衝突我猜有什麼我可以添加到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");; 
    } 
}); 

還對你的錨點擊呢，跟隨着克至避免再次隱藏日曆：

$(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

這是通過添加一個click處理程序document一個簡單的方法。

的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' />