modals are not working with <area> links
Closed this issue · 6 comments
From the documentation on modals: http://getbootstrap.com/javascript/#modals-options
Adding a href attribute pointing to a page will load the page's content inside .modal-content. It works for a regular link, it works for a button, but it doesn't work for a <area> link.
<area shape="poly" coords="..." data-toggle="modal" data-target="#modal">
This will toggle my #modal display with its default content.
<area shape="poly" coords="..." data-toggle="modal" data-target="#modal" href="remote.html">
Won't toggle my modal display but simply follow the link instead.
Never used an area element myself. Can you create a JS Bin or JS Fiddle example?
Well, this is weird. this jsfiddle (my first one, maybe I'm doing something wrong) does reproduce the bug, but the proper link, which should load the remote content inside the modal doesn't work either, even though it worked yesterday on my project.
Well, at least you have the <area> code you can copy-paste if you want to try locally ... I hope it will help !
The code currently only prevents the default action (navigating to the link target) for <a> tags.
See
Line 328 in d533bf0
Presumably we should add
<area> to that if.Updating if sounds good to me, I can go ahead with the change if the approach is confirmed.
@mishra-ankit Go for it. 😄 You will also need to add a testcase to the test suite; see https://github.com/twbs/bootstrap/tree/v4-dev/js/tests for info on how to do that.