Multiple functional modals active on a single page-CodePudding

I'm working on this webpage for a static site and my goal is to be able have multiple modals open at once. So far, I've gotten it where I want it, but I ran into some hiccups.

My main challenges are:

Each button opens up both dialogs simultaneously and closing one closes the other.
When I click on the dialog to drag, it jumps several pixels from where I clicked.
I have some other goals like animating and having the active dialog sit above others like an active window, but that's kinda beyond the scope of my main problem here for the moment.

For the first problem, I'm pretty sure I have to change my scripting a lot, but I have no idea where to start.

For the second problem, I'm pretty sure it's a problem with my html or css overall, but after testing each and every line, I still can't seem to find the problem. I am definitely missing something. Maybe it's too much to ask for someone to comb through my code, but I've included all of it in this post to give y'all the most accurate example.

Just FYI, I'm using jquery-ui v1.12.1 with no theme. Here's the JSFiddle: https://jsfiddle.net/puncushion/9tke3grp/

And here's the code below.

html:

<!DOCTYPE html>
<html>
<head>
<title>Test Project</title>
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jqueryui/jquery-ui.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>

<body>

<div class="container">
  <div class="title">
    <a href="index.html" id="title-fn">TEST</a>
    <a href="index.html" id="title-ln">PROJECT</a>
  </div>
  <div class="menu">
    <a href="">ABOUT</a>
    <a href="">2019</a>
    <a href="">2020</a>
    <a href="">2021</a>
  </div>

  <div class="content">
    <button class="click">Content 1</button>
    <div class="modal" id="modal-1">
      <div class="modal-header">
        <div class="modal-title">Content 1</div>
        <button class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, nisi ac dignissim venenatis, felis nibh luctus neque, a dictum sem risus sed mi. Mauris eu justo est. Donec sagittis, dui at efficitur aliquam, risus neque rutrum arcu, id varius ligula odio non enim. Maecenas ut odio vel dui dapibus venenatis. Etiam justo massa, consectetur ut nunc et, cursus condimentum metus. Suspendisse condimentum, ante molestie convallis semper, nunc felis dapibus ante, eget facilisis magna ex sit amet lacus. In auctor sit amet velit id ultrices. Suspendisse potenti. Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. Proin efficitur, ligula sit amet fringilla malesuada, tortor eros ullamcorper ligula, at vestibulum lacus erat et turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus bibendum ligula, eget vehicula risus finibus eu. Morbi in feugiat orci. Curabitur pharetra lacinia erat non dignissim. Donec vitae ipsum at augue venenatis tempus in at purus. Aenean varius eros dui, sit amet porttitor tellus condimentum quis.
      </div>
    </div>

    <button class="click">Content 2</button>
    <div class="modal" id="modal-2">
      <div class="modal-header">
        <div class="modal-title">Content 2</div>
        <button class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, nisi ac dignissim venenatis, felis nibh luctus neque, a dictum sem risus sed mi. Mauris eu justo est. Donec sagittis, dui at efficitur aliquam, risus neque rutrum arcu, id varius ligula odio non enim. Maecenas ut odio vel dui dapibus venenatis. Etiam justo massa, consectetur ut nunc et, cursus condimentum metus. Suspendisse condimentum, ante molestie convallis semper, nunc felis dapibus ante, eget facilisis magna ex sit amet lacus. In auctor sit amet velit id ultrices. Suspendisse potenti. Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. Proin efficitur, ligula sit amet fringilla malesuada, tortor eros ullamcorper ligula, at vestibulum lacus erat et turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus bibendum ligula, eget vehicula risus finibus eu. Morbi in feugiat orci. Curabitur pharetra lacinia erat non dignissim. Donec vitae ipsum at augue venenatis tempus in at purus. Aenean varius eros dui, sit amet porttitor tellus condimentum quis.
      </div>
    </div>
  </div>
</div>

</body>
</html>

css:

html, body {
  height: 100%;
  margin: 0px;
  background: #ecc;
  font-family: sans-serif;
}

.container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "title title title title subtitle menu"
    ". content content content . menu";
}

.title {
  grid-area: title;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 15px;
  position: fixed;
}

#title-fn {
  color: black;
  text-decoration: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

#title-ln {
  color: black;
  text-decoration: none;
  position: fixed;
}

.menu {
  grid-area: menu;
  writing-mode: vertical-rl;
  word-spacing: 50px;
  position: fixed;
  top: 50%;
  left: 50%;
  right: 2px;
  transform: rotate(180deg);
  transform: translate(0, -50%);
}

.content {
  grid-area: content;
}

.click {
  background-color: #ecc;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  border-bottom: solid;
  border-width: thin;
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 0rem;
  text-align: left;
  outline: none;
  font-size: 1em;
}

.modal{
    border:solid;
    border-width: thin;
    background-color: #ecc;
    width: 300px;
    max-height: 80%;
    display:none;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.modal-header {
  cursor: move;
  padding: .5rem .5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid;
  border-width: thin;
}

.modal-header .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.5rem;
}

.modal-body {
  padding: .5rem .5rem;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #ecc;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

js:

$(document).ready(function(){
  //draggable
  $('.click').click(function(){
    $('.modal').show();
    $('.modal').draggable({handle:'.modal-header'});
  });

  $(".close-button").click(function(){
    $(".modal").hide();
  });
});

CodePudding user response：

If I've understood well, what you want is each modal to be opened and closed separately, but being able to have both open at the same time.

Then you'll have to call the specific modal for each button clicked. Do so by calling the ".next" modal for opening (as they are immediate siblings), and ".closest" to `find the correct modal on close button click.

$(document).ready(function() {
  $('.click').click(function() {
    $(this).next('.modal').show();
    $(this).next('.modal').draggable({
      handle: '.modal-header'
    });
  });

  $(".close-button").click(function() {
    $(this).closest(".modal").hide();
  });
});

Here you have the working JSFiddle: https://jsfiddle.net/Bettylex/4xcq0f2a/3/