[NaSzybko] Pełnoekranowy, przeźroczysty jQuery Modal

Dzisiaj na szybko pokażę, jak zrobić pełnoekranowe modalne okno jQuery z przeźroczystym tłem. Zapraszam.

 

 


jQuery Modal

 

Pierwszą rzeczą jaką musimy zrobić to oczywiście dodać to naszego projektu jQuery oraz jQuery UI.

Przykładowy kod:

 

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

 

jQuery Modal polega na wyświetleniu kodu html w oknie. Może to być kod na stałe zapisany w naszym głównym widoku lub też pobierany z np. partial view. Dla przejrzystości oraz możliwości ponownego wykorzystania korzystam z tego drugiego sposobu. W naszym głównym kodzie znajduje się wtedy jedynie pusty div do którego później załadujemy resztę kodu.

<div id="productdialog"></div>

 

Okno aktywuje poprzez kliknięcie w przycisk. Gdy to nastąpi, ładujemy partial view oraz dodajemy przyciski.

 

$('#opendialogbutton').click(function() {
           productdialog = $("#productdialog").dialog({
               autoOpen: true,
               modal: true,
               width: $(window).width(),
               height: $(window).height(),
               open: function() {
                   $(this).load('@Url.Action("AddProduct")');
               },
               buttons: {
                   "Add": function() {
                       AddProduct();
                   }
               }
           });
       });

 


Pełny ekran

 

Jak widać, w naszym kodzie znalazły się parametry width oraz height. Dzięki javascriptowi przypisujemy im aktualny rozmiar okna, czyli samej strony, a nie rozdzielczość ekranu.

width: $(window).width(),
height: $(window).height()

Również tutaj ustawiamy, że nasze okno ma być modalne: wówczas inne okna nie reagują na polecenia użytkownika.

modal: true

 


Partial View

 

W funkcji open ładujemy do naszego dialogu cały kod html. Jest to banalnie proste, gdyż wystarczy wywołać metodę z naszego kontrolera która zwróci widok.

public PartialViewResult AddProduct()
{
     return PartialView("CreateProduct");
}


Przyciski

 

Aby dodać przyciski do naszego okna należy je zdefiniować w parametrze “buttons”. Najpierw go nazywamy, a następnie przypisujemy funkcję która ma się wykonać po naciśnięciu przycisku.

 

buttons: {
    "Add": function() {
                AddProduct();
      }     
}

 


UI

 

Po załadowaniu takiego okna nie jest ono zbyt miłe dla oka.

 

Domyślny widok okna

 

Aby to zmienić, wypadałoby usunąć pasek tytułowy oraz sekcję przycisków, jak również spowodować pojawienie się okna “wyżej” niż nasze menu.

Tutaj w grę wchodzi CSS.

 

Aby usunąć pasek tytułowy oraz sekcję obok przycisku zamykania potrzebny nam jest taki kod:

 

.ui-dialog-titlebar-close.ui-state-default,
.ui-dialog-titlebar-close.ui-state-hover {
 outline: none;
 background: none;
 border: none;
}
.ui-dialog .ui-widget-header {
 border: 0;
 background: none
}

 

Usuwamy więc tło oraz obramowanie.

Zróbmy to samo dla głównej sekcji:

 

.ui-widget-content {
 background: none !important;
 border: none !important;
}

 

Oraz poprawmy wyświetlanie nad menu. Domyślnie bootstrap navbar ma ustawiony z-index na 1050, musimy więc ustawić nasz dialog “wyżej”:

 

.ui-dialog {
   z-index: 1060 !important;
}

 

Poprawmy również wyświetlanie przycisku:

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none;
  position: absolute;
}

.ui-dialog-buttonpane .ui-dialog-buttonset {
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

Mając już te wszystkie zmiany ustawiamy nasze tło na przeźroczyste w odcieniu czerni:

 

.ui-dialog.ui-widget-content {
 border: none;
 background-color: rgba(0,0,0,0.9) !important;
}

Kolor oraz stopień przeźroczystości ustalamy zmieniając wartości rgba. Trzy pierwsze wartości odpowiadają za kolor, ostatnia za przeźroczystość.

 

Teraz nasze okno prezentuje się zdecydowanie lepiej:

 

Okno z naniesionymi poprawkami

 

Pozostaje już tylko zająć się wnętrzem okna, przykładowo można je wyśrodkować a tekst ustawić na biały:

 

#productdialog {
 position: relative;
}

#addproductform {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

#addproductform p {
 color: white;
 padding-top: 10px;
 font-size: 25px;
 font-weight: bold;
}

 

Ostateczny wygląd okna

 

Teraz nasze okno jest już wyświetlane na pełnym oknie, z przeźroczystym tłem oraz wyśrodkowaną zawartością. Oczywiście przyciski również można dekorować wg uznań, to już jednak pozostawiam waszej fantazji i na pewno zdecydowanie lepszym umiejętnościom graficznym 😉

 


Podsumowanie

 

W taki oto sposób bez dużego nakładu pracy otrzymujemy eleganckie oraz proste okno modalne. jQuery UI daje nam możliwość dużej personalizacji, a obsługa przycisków jest prosta i przejrzysta.

 

Dzięki za odwiedziny, do zobaczenia, cześć!

Dodaj komentarz