Skocz do zawartości
  • 0

Popup otwierany buttonem

Pytanie

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ść zdjecie

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>

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

10 odpowiedzi na to pytanie

Polecane posty

  • 0

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.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Pani Kasia

  • 0

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. 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
  • 0
Autor tematu Napisano (edytowany)

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();
});

 

Edytowano przez Kennar

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Pani Kasia

  • 0

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. 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
  • 0

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

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
  • 0

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. 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Pani Kasia

  • 0

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

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
  • 0

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. 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
  • 0
Autor tematu Napisano (edytowany)

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ę

Edytowano przez Kennar

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
  • 0

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. 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Pani Kasia

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się

  • Kto przegląda   0 użytkowników

    Brak zalogowanych użytkowników przeglądających tę stronę.

×
Okienko zamknie się za 5 sekund...