Popup otwierany buttonem

[Kennar]

Witam.

Potrzebuję pomocy bo od wczoraj się męczę z tym żeby zrobić kilka popups na 1 stronie, a dokładnie aby każdy z przycisków miał inną treść. 
Chce aby każdy z przycisków "Lista Modów" miał inną treść 

Chcę użyć tego kodu: https://www.w3schools.com/code/tryit.asp?filename=GB8QMYLZNOSW  lub innego lecz żeby działało

 

A jeśli chodzi o kod przycisku "Lista modów"  którego używam na stronie

<div class="btn-group-lg download-div" style="margin-top: -1rem;">
  <a class="btn btn-primary" role="button"><bialy>Lista modów</bialy></a>
</div>

 

[carbonx]

W miarę szybko można to zrobić w jquery, wtedy przyciskowi "Lista Modów" dajesz np. klasę "openpopup" i atrybut popup-id="x", a w jquery piszesz sobie taką funkcję:

$('body').on('click', 'button.openpopup', function() {
  let modalId = $(this).attr( "popup-id" );
  $("#popup_" + modalId).show();
});

a z kolei popupy robisz sobie kolejno: popup_1, popup_2 etc. i według tego nadajesz wartości atrybutowi popup-id.

[Kennar]

Mam taki skrypt i pytanie jak zrobić w nim, żeby klikając poza okienko popups się zamyka? 
Bo aktualnie tylko przycisk działa 😕

$( ".open-modal" ).click(function() {
  var id = $(this).data("id");
  $("#modal"+id).show();
});
$( ".modal span" ).click(function() {
	$(".modal").hide();
});

 

[carbonx]

No to jak go otwierasz to powinieneś też wyświetlić jakiegoś przyciemnianego overlay'a, który będzie pod spodem modal'a i będziesz wykrywał kliknięcie na niego. 

[Kennar]

A można prosić o gotowy kod bo nie znam się na tym akurat, jak coś na pw mogę wysłać kod tabeli 

[carbonx]

Ale tu nie trzeba się na niczym znać, tworzysz sobie div'a 100% na 100% z position: fixed, który ma background: #000 i opacity np. 0.5 (albo już w rgba od razu dajesz przezroczyste tło) i domyślnie dajesz mu display: none i w momencie kiedy otwierasz popup otwierasz też tego div'a. 

[Kennar]

A mógłbyś mi to zrobić, jak wyślę Ci kod na pw?

[carbonx]

NIE, bo to nie tak działa - ja tu jestem żeby pomagać, a nie robić za kogoś, bo za to pobieram wynagrodzenie. Napisz czego nie rozumiesz to Ci wytłumaczę, ale gotowca linijkę w linijkę Ci nie podam. 

[Kennar]

Ogólnie tak mam w css: 

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  max-width: 1100px;
  min-width: 620px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

Oraz div'a z kodem: 

 

<div id="modal1" class="modal">
            <div class="modal-content">
              <div class="modal-listamodow">
                <span class="close"><h2>&times;</h2></span>
                <h2>
                  <czarny>Lista modów</czarny>
                </h2>
                <hr>
              </div>
              <div class="modal-listamod">
                <table class="tbtab" border="1" frame="void" rules="cols">
                  <tr>
                    <td><h5>MODY</h5></td>
                    <td><h5>MODY</h5></td>
                    <td><h5>MODY</h5></td>
                  </tr>
                  <tr>
                    <td><h5>MODY</h5></td>
                    <td><h5>MODY</h5></td>
                    <td><h5>MODY</h5></td>
                  </tr>
                  <tr>
                    <td><h5>MODY</h5></td>
                    <td><h5>MODY</h5></td>
                    <td><h5>MODY</h5></td>
                  </tr>
                  <tr>
                    <td><h5>MODY</h5></td>
                    <td><h5>MODY</h5></td>
                    <td><h5>MODY</h5></td>
                  </tr>
                </table>
              </div>
              <div class="footer-copyright page-footer text-center py-3" style="margin-top: 2rem; color: white; background-color: rgb(37, 41, 46);">
                © 2020 Copyright:
                <a href="index.html">xxxx</a>
              </div>
            </div>
          </div>

Mam niby to co pisałeś a i tak klikając poza ramkę nie zamyka się

[carbonx]

Nie ukrywam że brakuje Ci absolutnych podstaw bo robisz rzeczy całkowicie nielogiczne. Myślę, że warto byłby najpierw przysiąść do jakiegoś krótkiego kursu, żeby zrozumieć jak działa html/css. Niemniej postaram Ci się to jakoś wytłumaczyć. To o czym Ci pisałem to ma być pusty div, bez żadnej zawartości - coś takiego: 

<div class="modal-overlay"></div>

Klasa ma mieć następujące style:

.modal-overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

Wraz z wyświetlaniem popup'a otwierasz także overlay'a, czyli w tym miejscu:

$( ".open-modal" ).click(function() {
  var id = $(this).data("id");
  $("#modal"+id).show();
  $(".modal-overlay").show(); // wstawiasz tu ten kod
});

I później sprawdzasz czy użytkownik na niego kliknął i jeśli tak to zamykasz i modal'a i overlay'a, pamiętaj tylko, że popup musi mieć większy z-index żeby nie został przykryty przez overlay'a zwłaszcza gdybyś go wrzucił wyżej. 

[Markiewicz]

Najszybciej można to zrobić za pomocą JavaScriptu. Odwołujesz się do klasy lub id buttona i używając zdarzenia onclick zmieniasz wartość <p> pop-upu. Jeśli nie wiesz jak to zrobić to możesz mi wysłać kod na PW.