Bootstrap modal open on clicking image
19,055
Solution 1
Try:
$(document).ready(function () {
$("ul").on('click','#pop',function () {
$('#myModal').modal('show');
});
});
Solution 2
I think you have missed below reference libraries in your application.
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');
});
});
Demo:
https://jsfiddle.net/zz9wqroc/
Author by
Admin
Updated on June 06, 2022Comments
-
Admin about 2 years
when i click
menu-5_1.pngthe below model should pop up<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"> ×</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> -
Codeone over 8 yearsits not work for me jsfiddle.net/MadhawaMB/o74zt4zy, can you please explain it? -
RGS over 8 years@Cola, Check this fiddle. jsfiddle.net/o74zt4zy/1. Error because of http/https reference issue.
