locked
Bootstrap modal dialog fires mouseout event multiple times RRS feed

  • Question

  • User1343581070 posted

    Hi,

           I have a datalist with an image gallery.  When the user hovers over an image the bootstrap modal opens up and closes on the mouseout event of the modal. However the mouseout event fires several times with the result that the modal appears and disappears simultaneously. My datalist code is

                                        <asp:DataList ID="dlProducts" runat="server" ItemStyle-Width="228px" ClientIDMode="Static" CellPadding="0" CellSpacing="2" RepeatColumns="5" RepeatDirection="Horizontal" RepeatLayout="Table" GridLines="Both"   BorderColor="Blue" BorderStyle="Solid" BorderWidth="1px"> 
                                           <HeaderStyle BackColor="#333333" Font-Bold="True" Font-Size="Large"  ForeColor="White"  HorizontalAlign="Center"   VerticalAlign="Middle" />
                                               <HeaderTemplate >New Arrivals</HeaderTemplate>
                                                  <ItemStyle BackColor="White" ForeColor="Black" BorderColor="Orange" BorderWidth="3px" /> 
                                                     <ItemTemplate  > 
    
                                                        <div style="border:1px solid #ccc;margin:10px;padding:10px;height:auto;">
    
                                                             <asp:Label ID="Label4" runat="server" Text='<%# Eval("CategoryName")%>' Font-Bold="True" Font-Size="1.2em" ForeColor="Navy"/><br /> 
                                                             <asp:Label ID="Label5" runat="server" Text='<%# Eval("Description")%>' Font-Italic="true"/><br /> 
                                                             <asp:Label ID="Label6" ClientIDMode="Static" runat="server" Text='<%# "Price: Rs " + System.Convert.ToString(Eval("Cost_In_Rupees"))%>' Font-Bold="True" Font-Size="1.2em" ForeColor="Navy"/><asp:Image
                                                                                    ID="imgStar" runat="server" Visible="false" ImageUrl="~/App_Themes/Monochrome/Images/GreenStar.png" /><br /> 
                                                                                     Stock:&nbsp;
                                                                                     <asp:Label ID="lblAvailableStock" runat="server" Text='<%# Eval("AVAILABLESTOCK")%>'
                                                                                      ToolTip ="Available Stock" ForeColor="Red" Font-Bold="true"></asp:Label>
    
                   
                                                             <div style="display:block;">
                                                                  <asp:ImageButton ID="Image1" cssClass="getSrc" ClientIDMode="Static" data-toggle="modal" data-target="#myPopUpImageModal" OnMouseOver="ShowPopUpImage(this)" OnMouseLeave="myPopUpImageMouseOut()" ImageUrl='<%# Eval("IMAGEURL")%>' runat="server"  Width="100" Height="80" /> 
                                                             </div>
                                                             <asp:Button ID="btnAddToCart" runat="server" CommandArgument='<%# Eval("ProductID") %>' OnClick="btnAddToCart_Click" Text="Add To Cart" Width="100%" BorderColor="Black"  BorderStyle="Inset" BorderWidth="1px" CausesValidation="false" />
                                                             <asp:HiddenField ID="hfProductID" runat="server" Value='<%# Eval("ProductID") %>' />
                                                             <div id="enlarge_images" style="; z-index:2"></div>
                                                        </div>
                                                     </ItemTemplate> 
                                                  <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" /> 
                                        </asp:DataList>
    

    and the javascript is

           $(document).ready(function () {
    
               document.getElementById("myPopUpImageModal").onmouseout = function () { myPopUpImageMouseOut() };
    
               function myPopUpImageMouseOut() {
                   alert("mouseoutmodal");
                   $('#myPopUpImageModal').modal('hide');
    
                   $('#myPopUpImageModal').on('hide.bs.modal', function () {
                       $(this).off('hide.bs.modal');
                   });
               }
    
           });
    
    
           function ShowPopUpImage(obj) {
    
               var src = obj.src
               alert("AWIT");
    
               var price = $(obj).prevAll('#Label6').text();
               var description = $(obj).prevAll('#Label5').text();
    
               $("#imagepreview").attr("src", src);
    
               document.getElementById('<%=ModalPrice.ClientID%>').innerHTML = price;
               document.getElementById('<%=ModalDescription.ClientID%>').innerHTML = "Item Description : " + description;
    
               $('#myPopUpImageModal').modal({
                   keyboard: false,
                   backdrop: 'static'
               });
    
    
               //$('#myPopUpImageModal').modal('show');
    
    
                   return;
               }
    
    

    Please help

    Regards

    Sanjish

    Thursday, September 1, 2016 5:29 AM

All replies

  • User-1142886626 posted

    Hi SANJISH KUMAR,

    document.getElementById("myPopUpImageModal").onmouseout = function () { myPopUpImageMouseOut() };

    When you move the mouse to the image, it will trigger the onmouseover event, then pop-up a window. When the mouse leaves the pop-up window, just move to the pictures. It will fire the onmouseout event then fire the onmouseover event. Visually, like triggered twice. Try make the modal content show and hide, it will look better.

    Code below is for your reference.

    document.getElementById("myPopUpImageModal1").onmouseout = function () { myPopUpImageMouseOut() };
    <!-- Modal content-->
          <div id="myPopUpImageModal1" class="modal-content">
            <div class="modal-header">
    

    Best Regards,

    Ailleen

    Thursday, September 1, 2016 11:27 AM
  • User1343581070 posted

    Hi Ailleen,

                      I am already using the modal-content class.  Please give me code to stop modal firing twice . Attached is my modal script

    Please help

    regards

    Sanjish

    <div class="container">
      <div class="modal fade" id="myPopUpImageModal" role="dialog"  >
        <div class="modal-dialog modal-lg">
       
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">My Cart Items</h4>
            </div>
            <div class="modal-body">
              <asp:Image ID="imagepreview" runat="server" ClientIDMode="Static" Width="500px" Height="300px" ImageUrl="~/App_Themes/Monochrome/Images/penguins.jpg" Style="padding-left: 40px" />
              <div>
                 <asp:Label ID ="ModalDescription" ClientIDMode="Static" Text="Item Description :" runat="server" ></asp:Label>
              </div>
              <div>Material :</div> 
              <div >Price:</div>
              <asp:Label ID ="ModalPrice" ClientIDMode="Static" Text="Price :" runat="server" ></asp:Label>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>
    

    Thursday, September 1, 2016 1:31 PM
  • User-474980206 posted

    mouse in & out events bubble. as you mouse over the children of the modal, they fire mouse in and mouse out events that bubble up to the parent. this means on a mouse out, determine if the mouse is still inside the modal content. you use the event object passed to the handle to determine the target and the x & y position. the following simple code should work.

    $(document).ready(function () {
    
       var $modal = $("#myPopUpImageModal");
       $modal.onmouseout(function (e) { 
            // ignore child events 
            if ($.contains($modal,e.target)
               return;
    
             $modal.modal('hide');
             $modal.on('hide.bs.modal', function () {
                    $(this).off('hide.bs.modal');
             });
        });
    
     });
    

    Friday, September 2, 2016 12:48 AM
  • User1343581070 posted

    Hello Bruce ,

                          Your solution seems correct but the Jquery statements var $modal = $("#myPopUpImageModal"); and   $modal.onmouseout(function (e) {  are not executing .

    Please help

    regards

    Sanjish

    Friday, September 2, 2016 5:32 AM
  • User-1142886626 posted

    Hi SANJISH KUMAR,

    You could refer the following link.

    http://stackoverflow.com/questions/4697758/prevent-onmouseout-when-hovering-child-element-of-the-parent-absolute-div-withou

    Code below is for your reference.

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#Image1").mouseover(function () {
                 $('#myPopUpImageModal').modal('show');
              })
                $("#myPopUpImageModal1").mouseout(function (event) {
                  e = event.toElement || event.relatedTarget;
                      if (e.parentNode == this || e == this) {
                          return;
                      }
                      $('#myPopUpImageModal').modal('hide');
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="container">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/rhino.jpg"/>
      <div class="modal fade" id="myPopUpImageModal" role="dialog" >
        <div class="modal-dialog modal-lg" >
          <!-- Modal content-->
          <div id="myPopUpImageModal1" class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">My Cart Items</h4>
            </div>
            <div class="modal-body">
              <asp:Image ID="imagepreview" runat="server" ClientIDMode="Static" Width="500px" Height="300px" ImageUrl="~/Images/rhino.jpg" Style="padding-left: 40px" />
              <div>
                 <asp:Label ID ="ModalDescription" ClientIDMode="Static" Text="Item Description :" runat="server" ></asp:Label>
              </div>
              <div>Material :</div> 
              <div >Price:</div>
              <asp:Label ID ="ModalPrice" ClientIDMode="Static" Text="Price :" runat="server" ></asp:Label>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
        </form>
    </body>
    

    Best Regards,

    Ailleen

    Friday, September 2, 2016 9:13 AM
  • User1343581070 posted

    Hi Ailleen,

                       It doesn't work if you are using a datalist image gallery and moving from one image to another. Please try out with a datalist and let me know

    Regards

    Sanjish

    Sunday, September 4, 2016 10:40 AM
  • User-1142886626 posted

    Hi SANJISH KUMAR,

    You could refer to the following link:

    http://stackoverflow.com/questions/9387433/onmouseover-running-multiple-times-while-hovering-on-element

    Best Regards,

    Ailleen

    Tuesday, September 6, 2016 10:14 AM