Dodatak za pop-up blokove/obrasce za jQuery/AJAX

Atribut svake moderne web stranice, servisa ili portala su dinamički pop-up forme s dodatnim sadržajem ili radnjama na stranici. U ovom članku ćemo pogledati naš vlastiti rad na univerzalnom rješenju problema iskačućih obrazaca s bilo kojim sadržajem koristeći jQuery i AJAX.

Dodatak se može povezati sa bilo kojom stranicom sajta. Koristeći dodatak za dinamičko učitavanje sadržaja, lako možete implementirati zadatke iskačućih obrazaca, učitavajući bilo koji dinamički sadržaj u bilo kojem obliku koji vam odgovara.

Preuzmite dodatak

Prepoznatljive karakteristike i mogućnosti univerzalnog pop-up blok dodatka:

• Dinamičko učitavanje dodatnog sadržaja ili iskačućih obrazaca
• Mnogo šablona za dinamičko učitavanje sadržaja
• Rad dodatka bez ponovnog učitavanja - AJAX
• Zaključavanje tastera za izbegavanje višestrukih pritisaka
• Jedinstveni stil bilo kojeg sadržaja

Univerzalni iskačući blok dodatak se sastoji od glavnih dijelova:

• HTML oznaka sa potrebnom maskom klase
• JQuery skripta za dinamičko učitavanje sadržaja
• Predlošci sadržaja koji se mogu preuzeti
• CSS stilovi za učitavanje sadržaja

Instaliranje primjera dodatka na host web servera

Nakon preuzimanja i raspakivanja dodatka, vidjet ćemo sljedeće stablo datoteka i direktorija:

/css/style.css              // Osnovni fajlovi stilova
/css/font-awesome.css       // Fajl stilova za FontAwesome
/fonts/*                    // Fajlovi fontova
/js/script.js               // jQuery skripta za dinamičko učitavanje
/images/exit.png            // Slika dugmeta za zatvaranje bloka
/framework/*                // Katalog fajlova-šablona za učitavanje sadržaja
index.html                  // Primer korišćenja dodatka

Zatim moramo postaviti arhivske datoteke na bilo koji web server. Skripta ne radi u načinu pregleda lokalnih datoteka u pretraživaču. Otpremite sav sadržaj u bilo koju mapu na hostu web servera i otvorite vezu kroz adresnu traku preglednika:

http(https)://domen.domen/path/to/dir/index.html

Ako otvorimo prezentacijsku stranicu sa opisom i dva dugmeta, sve je urađeno kako treba.

Zatim eksperimentiramo sa dugmadima "FORM" i "TEXT".

Instalacija i integracija pop-up dodatka za forme na web stranici

Da biste instalirali dodatak na postojeću stranicu, potrebno vam je:

1. Kopirajte sljedeću listu datoteka i direktorija:

/js/script.js               // jQuery skripta za dinamičko učitavanje
/images/exit.png            // Slika dugmeta za zatvaranje bloka
/framework/*                // Katalog fajlova-šablona za učitavanje sadržaja

2. Kopirajte ili kreirajte vlastiti stil dinamičkih elemenata za učitavanje koristeći sljedeći primjer:

.float-box_inset {
  position: relative;
  width: 820px;
  height: 350px;
  padding: 27px;
  background: #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  outline: 13px solid rgba(115, 7, 50, 0.6);
  margin: 20px auto;
  font-size: 16px;
  color: black;
  margin-top: 117px;
}

.float-box_inset a {
  color: #5a7f80;
}

.float-box {
  position: fixed;
  z-index: 1000;
  top: -21px;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9000;
}

.float-box .exit {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 26px;
  height: 26px;
  cursor: pointer;
  background: url("/images/exit.png") no-repeat scroll center top transparent;
}

.float-box .exit:hover {
    background-position: center bottom;
}

3. Kreirajte novu ili uredite postojeće oznake koristeći sljedeći primjer:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>

<a href="#" class="load--form">FORM</a>

Da bi dodatak radio, dugmadima, vezama ili drugim elementima HTML označavanja mora se dodijeliti vrijednost klase pomoću maske load--loader_template_name

4. Rezultati će uključivati ​​jQuery obradu pritiskanja elementa s odgovarajućom maskom klase koja generiše AJAX zahtjev.

Rezultat skripte bi trebao dodati oznaku "section" sa klasom "float-box" na kraj korijenskih podređenih elemenata oznake "body". Ako vam nešto ne radi kako treba, pogledajte primjer priložen kao arhivu ovog članka.

Kako funkcionira dodatak za univerzalni pop-up obrazac

Univerzalni dodatak za pop-up obrazac radi prema sljedećem principu:

1. Događaj klika se pokreće na elementima koji imaju klasu koja odgovara maski load--loading_template_name
2. Dodatak blokira ponovljeno klikanje aktiviranog elementa
3. Događaj generiše GET zahtjev koristeći AJAX i jQuery preko linka /framework/upload_template_name.php
4. U slučaju uspješnog odgovora na GET zahtjev, dodatak dodaje oznaku učitanog sadržaja na kraj podređenih elemenata oznake "body"
5. Bez obzira na ishod GET zahtjeva, po završetku AJAX funkcije, skripta otključava dugme.