Есть ли способ открыть модал в области тега? - PullRequest
Новая
       13

Есть ли способ открыть модал в области тега?

0 голосов
/ 26 марта 2020

Я хочу иметь возможность иметь карту региона и иметь возможность щелкнуть область внутри изображения и открыть модал с информацией из этой области, я могу перенаправить ее на другую страницу, но я хочу откройте модальный режим, чтобы уменьшить скопированный код. 

body>
    <nav class="navbar navbar-light bg-dark">
        <a style="color:white;" class="navbar-brand" href="#">Serviços Disponíveis por Concelho</a>
      </nav>
      <div align="center">
      <img src="viseu.gif" width="437" height="486" border="1" usemap="#parishes">
      <map name="parishes">
      <area alt="Cinfães" coords="86,81,137,105" href="#">
      <area alt="Resende" coords="141,62,196,85" href="#">
      <area alt="Lamego" coords="196,70,245,92" href="#">
...

Я пытался сделать это 

<area alt="São Pedro do Sul" coords="95,192,159,228" type="button" data-toggle="modal" data-target="#exampleModal">
      </map>
    </div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

Но это не работает

...