Как создать несколько модалов на карте изображений? - PullRequest
Новая
       34

Как создать несколько модалов на карте изображений?

0 голосов
/ 20 мая 2019

Я хочу иметь несколько модалов на карте изображений с 2 ​​разными областями и, следовательно, 2 разными модалами в одном стиле. До сих пор я могу открывать один и тот же модал только в разных областях карты.

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Modal</title>

<style>

  *{

   margin: 0;

   padding: 0;

   box-sizing: border-box;

  }

  body{

   font-family: calibri;

  }

  a:link,

  a:visited{

   text-decoration: none;

  }

  .modal{

   background-color: rgba(0,0,0, .8);

   width:100%;

   height: 100vh;

   position: absolute;

   top: 0;

   left: 0;

   z-index: 10;

   opacity: 0;

   visibility: hidden;

   transition: all .5s;

  }

  .modal__content{

   width: 30%;

   height: 30%;

   background-color: #fff;

   position: absolute;

   top: 50%;

   left: 50%;

   transform: translate(-50%, -50%);

   padding: 2em;

   border-radius: 1em;

   opacity: 0;

   visibility: hidden;

   transition: all .5s;

  }

  #modal:target{

   opacity: 1;

   visibility: visible;

  }

  #modal:target .modal__content{

   opacity: 1;

   visibility: visible;

  }

  .modal__close{

   color: #363636;

   font-size: 2em;

   position: absolute;

   top: .5em;

   right: 1em;

  }

  .modal__heading{

   color: #e11021;

   margin-bottom: 1em;

  }

  .modal__paragraph{

   line-height: 1.5em;

  }

.modal-open{

display: inline-block;

color: #e11021;

margin: 2em;

}



</style>

</head>

<body>
    <div class="to is-default-on">
  <img src="https://www.expo21xx.com/news/wp-content/uploads/Allied-Mako-G-508-POL-camera-700x389.jpg" width="145" height="126" alt="camera" usemap="#cameramap">
  <map name="cameramap">
    <area shape="rect" coords="46,38,338,242" alt="links" href="#modal">
  <div class="modal" id="modal">

    <div class="modal__content">

      <a href="#" class="modal__close">&times;</a>

      <h2 class="modal__heading">Headline</h2>

      <p class="modal__paragraph">Content 1.</p>

    </div>


<div>
  <area shape="circle" coords="484,152,125" alt="rechts" href="#modal">
    <div class="modal">

    <div class="modal__content">

      <a href="#" class="modal__close">&times;</a>

      <h2 class="modal__heading">Headline 2</h2>

      <p class="modal__paragraph">Content 2.</p>

    </div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (e) {
            var image = $(e.relatedTarget).attr('src');
            $(".img-responsive").attr("src", image);
        });
});
</script> 

</body>

</html>
...