Skip to content Skip to sidebar Skip to footer
Home / Bootstrap Modal / Css / Href / Html

Href Link Inside Modal Is Not Working

Post a Comment
I have a Modal in my webpage which uses Bootstrap. I've added anchor tags in it to which there are href links. When I am trying to click on that anchor element, it is not clickable

Solution 1:

try this $("#yourModalID table tbody").on('click','.yourBtnClass', function(){ //do something here })

Solution 2:

Check it, I used clearfix div. but if I don't want clearfix, then I use (div class="modal-body col-sm-3") because link divs have a float value but modal-body doesn't.

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Untitled Document</title><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"></head><body><buttontype="button"class="btn btn-info btn-lg"data-toggle="modal"data-target="#editionsModal">Open Modal</button><divclass="portfolio-modal modal fade"id="editionsModal"tabindex="-1"role="dialog"aria-hidden="true"><divclass="modal-content"><divclass="close-modal"data-dismiss="modal"><divclass="lr"><divclass="rl"></div></div></div><divclass="container"><divclass="row"><divclass="col-lg-8 col-lg-offset-2"><divclass="col-sm-3"><ahref="hingoli.html"data-target="#"style="text-decoration: none;"><divstyle="padding:15px; color:#181818; text-align: center; "><h4>Hingoli</h4></div><imgsrc="pages/hingoli/1.jpg"style="margin: 0 auto; display: block;"class="modal-img"alt=""></a></div><divclass="col-sm-3"><ahref="parbhani.html"class="portfolio-link"style="text-decoration: none;"><divstyle="padding:15px; color:#181818; text-align: center; "><h4>Parbhani</h4></div><imgsrc="pages/parbhani/1.jpg"style="margin: 0 auto; display: block;"class="modal-img"alt=""></a></div><divclass="clearfix"></div><divclass="modal-body"><buttontype="button"class="btn btn-default"data-dismiss="modal"><iclass="fa fa-times"></i> Close</button></div></div></div></div></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>

Solution 3:

I was having the same behaviour with Bootstrap 4 and it turns out that .modal-dialog div has a pointer-events: none; attribute that disables the links. Setting to pointer-events: all; fixed it for me.

Solution 4:

Please try this code!

$('#editionsModal .container a').on('click',function( ev){
  var $button=$(ev.target);
  ev.preventDefault();
  $(this).closest('.modal').on('hidden.bs.modal',function(e){
    var $href=$button.attr('href');
    window.location.href=$href;
    });
});

Post a Comment for "Href Link Inside Modal Is Not Working"