Bootstrap модальный открыт щелкать изображение

Question

, когда я нажимаю menu-5_1.png ниже модель должна всплывал

 <li class="men_5l" ><a id = "pop" href="#"><span><img src="images/menu_5_1.PNG" alt=""></span> <p>Mp3</p></a></li> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 
    aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        &times;</button> 
       <h4 class="modal-title" id="myModalLabel"> 
        Don't Wait, Login now!</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;"> 
         <!-- Nav tabs --> 
         <ul class="nav nav-tabs"> 
          <li class="active"><a href="#Login" data-toggle="tab">Login</a></li> 
          <li><a href="#Registration" data-toggle="tab">Registration</a></li> 
         </ul> 
         <!-- Tab panes --> 
         <div class="tab-content"> 
          <div class="tab-pane active" id="Login"> 
           <form role="form" class="form-horizontal"> 
           <div class="form-group"> 
            <label for="email" class="col-sm-2 control-label"> 
             Email</label> 
            <div class="col-sm-10"> 
             <input type="email" class="form-control" id="email1" placeholder="Email" /> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="exampleInputPassword1" class="col-sm-2 control-label"> 
             Password</label> 
            <div class="col-sm-10"> 
             <input type="password" class="form-control" id="exampleInputPassword1" placeholder="password" /> 
            </div> 
           </div> 

           <div class="row"> 
            <div class="col-sm-2"> 
            </div> 
            <div class="col-sm-10"> 



             <asp:Button ID="Button1" class="btn btn-primary btn-sm" runat="server" 
              Text="log in" /> 


             <a href="javascript:;">Forgot your password?</a> 
            </div> 
           </div> 
           </form> 
          </div> 
          <div class="tab-pane" id="Registration"> 
           <form role="form" class="form-horizontal"> 
           <div class="form-group"> 
            <label for="email" class="col-sm-2 control-label"> 
             Name</label> 
            <div class="col-sm-10"> 
             <div class="row"> 
              <div class="col-md-3"> 
               <select class="form-control"> 
                <option>Mr.</option> 
                <option>Ms.</option> 
                <option>Mrs.</option> 
               </select> 
              </div> 
              <div class="col-md-9"> 
               <asp:TextBox ID="txtPagingGoto" class="form-control" runat="server"></asp:TextBox>             
              </div> 
             </div> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="email" id="emailField" class="col-sm-2 control-label"> 
             Email</label> 
            <div class="col-sm-10"> 
             <asp:TextBox ID="txtEmail" class="form-control" runat="server"></asp:TextBox> 

            </div> 
           </div> 
           <div class="form-group"> 
            <label for="mobile" class="col-sm-2 control-label"> 
             Mobile</label> 
            <div class="col-sm-10"> 
             <input type="text" id="txtPhoneNo" class="form-control" placeholder="Mobile" onkeypress="return isNumber(event)" /> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="password" id="p1" class="col-sm-2 control-label"> 
             Password</label> 
            <div class="col-sm-10"> 
             <input type="password" id="pass1" class="form-control" placeholder="Password" /> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="password" class="col-sm-2 control-label"> 
             Re-Enter Password</label> 
            <div class="col-sm-10"> 
             <input type="password" id="pass2" class="form-control" placeholder="Password" /> 
            </div> 
           </div> 
           <div class="row"> 
            <div class="col-sm-2"> 
            </div> 
            <div class="col-sm-10"> 


             <asp:Button ID="Button2" class="btn btn-primary btn-sm" runat="server" Text="Register"/>  


             <button type="button" class="btn btn-default btn-sm"> 
              Cancel</button> 
            </div> 
           </div> 
           </form> 
          </div> 
         </div> 
         <div id="OR" class="hidden-xs"> 
          </div> 
        </div> 
        <div class="col-md-4"> 
         <div class="row text-center sign-with"> 
          <div class="col-md-12"> 
           <h3 class="other-nw"> 
            Sign in with</h3> 
          </div> 
          <div class="col-md-12"> 
           <div class="btn-group btn-group-justified"> 
            <div style="height:20px;width:100%;"> <a href="#" class="btn btn-primary">Facebook</a></div><div style="margin-top: 35px; width: 100%;"> <a href="#" class="btn btn-danger"> 
             Google +</a></div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript" language="javascript"> 

    $(document).ready(function() { 
     $("#pop").click(function() { 
      $('#myModal').modal('show'); 
     }); 
    }); 



</script> 

Answer 1

Я думаю, что вы пропустили ниже справочных библиотек в приложении.

https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js

$(document).ready(function() { 
    $("#pop").click(function() { 
    $('#myModal').modal('show'); 
    }); 
}); 

Демонстрация:

https://jsfiddle.net/zz9wqroc/

Answer 2

Попытка:

$(document).ready(function() { 
    $("ul").on('click','#pop',function() { 
    $('#myModal').modal('show'); 
    }); 
});