Kako stvoriti modalne skočne prozore? / Bootstrap & jQuery & CSS

Napomena: Sljedeći članak će vam pomoći: Kako stvoriti modalne skočne prozore? / Bootstrap & jQuery & CSS

Modalni skočni prozori često se koriste na webu za pokretanje prijava za bilten, prikazivanje obavijesti/upozorenja i kontrolu obrazaca za registraciju i prijavu.

Možete koristiti različite načine za stvaranje modalnih skočnih prozora pomoću HTML, CSSi JavaScript. Stoga ćete sada konkretno učiti korak po korak o tome Bootstrap modalni skočni prozor, jQuery modalni skočni prozori CSS modalni skočni prozor.

Zatim ću vam konačno dati vrlo jednostavan i djelotvoran način za stvaranje i implementaciju skočnih prozora. Međutim, prvo biste trebali naučiti zašto se koriste modalni skočni prozori i zašto su toliko važni.

Modalni skočni ili dijaloški okvir pomaže u prikazu posljednje ažurirane web stranice. Prednost modalnog skočnog prozora prikazuje dodane informacije i ne učitava stranicu ponovo. Važan je za bolje korisničko iskustvo jer korisnicima pruža mogućnost pregledavanja relevantnih informacija u skočnom okviru na sličnoj web stranici.

Modali ostaju tihi sve dok se ne pokrenu i općenito se koriste za fokusiranje na korisnika na jedan poziv koji treba biti aktivan ili za naglašavanje informacija kao što su obrasci za prijavu i upozorenja.

Postoje mnoga mjesta u koja su uključeni modalni skočni prozori:

• Upit/kontakt obrasci

• Obrasci za stvaranje potencijalnih kupaca/prijave

• Obrasci za prijavu/registraciju

• Obrasci za pretraživanje

• Upozorenja/obavijesti

• Pomoć/savjeti

• Prikaz slika i videozapisa preko cijelog zaslona

Možete stvoriti svoje skočne prozore oko svojih ciljeva. Na primjer, Alpma dopušta korisnicima da se prijave svugdje na mjestu.

Iako su skočni prozori na lošem glasu u vezi s njihovom upotrebom, ako ih koristite ispravno, možete imati koristi od njih za:

• povećati upotrebljivost vaše web stranice.
• smanjiti vremena učitavanja.
• razjasniti sve dizajne.

Nakon što smo naučili zašto su modalni skočni prozori toliko važni, sada možemo naučiti kako ih stvoriti.

Kao što ste pročitali gore, modalni skočni prozori pomažu korisnicima da mogu poduzeti radnje prije nego što se presele negdje drugdje. Ponekad se može koristiti za upozoravanje korisnika ili uzimanje informacija.

Bootstrap modalni dodatak pomaže vam stvoriti vrlo korisne i funkcionalne modalne skočne prozore ili dijaloške okvire. Možete provjeriti primjer u nastavku da biste razumjeli kako možete stvoriti vlastiti modalni skočni prozor sa zaglavljem, podnožjem i tijelom poruke.

<pre class="tCont active hljs javascript"><div id=<span class="hljs-string">"myModal"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"modal fade"</span>>
    <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-dialog"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-content"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span> <span class="hljs-attr">data-dismiss</span>=<span class="hljs-string">"modal"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>×<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title"</span>></span>Confirmation<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Do you want to save changes you made to document before closing?<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>></span><span class="hljs-tag"><<span class="hljs-name">small</span>></span>If you don't save, your changes will be lost.<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-default"</span> <span class="hljs-attr">data-dismiss</span>=<span class="hljs-string">"modal"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Save changes<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
<<span class="hljs-regexp">/div></span>

Kada se “model objekta dokumenta” učita kroz JavaScript, prozor će se automatski otvoriti.

jQuery modalni dijaloški okviri izvrstan su način za brzu demonstraciju informacija. Ako se pravilno pripremite dok stvarate jQuery modalne dijaloške okvire, možete upozoriti svoje korisnike ili prikazati pogreške s cool web stranicama. (Zbog suvremenog modala!)

Pogledajmo jQuery primjer!

<script ></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
</script>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>Click me</button>

Nakon ovoga možete vidjeti sljedeće:

CSS je jezik koji opisuje kako HTML elementi trebaju biti prikazani na ekranu. Stoga prvo gledamo HTML, a zatim ispitujemo CSS.

<div class="container">
  <div class="interior">
    <a class="btn" href="#open-modal"><i class="fas fa-external-link-alt"></i> Basic CSS-Only Modal</a>
  </div>
</div>
<div id="open-modal" class="modal-window">
  <div>
    <a href="#" title="Close" class="modal-close">Close</a>
    <h1>Hello!</h1>
    <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
  </div>
</div>

Zatim dodajte CSS!

.modal-window {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  &:target {
    opacity: 1;
    pointer-events: auto;
  }
  &>div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: #ffffff;
    color: #333333;
  }
  header {
    font-weight: bold;
  }
  h1 {
    font-size: 150%;
    margin: 0 0 15px;
    color: #333333;
  }
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
  &:hover {
    color: #000;
  }
}

/* Demo Styles */

html,
body {
  height: 100%;
}

body {
  font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background-color: #f69d75;
  color: #555555
}

a {
  color: inherit;
}

.container {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.btn {
  background-color: #fff;
  padding: 1em 1.5em;
  border-radius: 3px;
  text-decoration: none;
  i {
    padding-right: 0.3em;
  }
}

Ovako izgleda:

Bez sumnje, svoje modalne skočne prozore možete izraditi za bilo koju svrhu i gdje god se na vašoj web stranici primjenjuju. Međutim, postoji funkcionalniji i jednostavniji način za stvaranje modalnih skočnih prozora.

Pametni alat za izradu skočnih prozora, Popupsmart čini sve u vaše ime. Za prvi korak trebali biste utvrditi zašto vam je potreban skočni prozor. To može biti povećanje konverzije prodaje, povećanje popisa e-pošte ili povećanje telefonskih poziva. Nakon toga, odabirom ciljeva možete prijeći na sljedeće korake:

Postoji mnogo gotovih predložaka među kojima možete birati. Ako želite usmjeravati svoju publiku s “skočnim prozorom s objavom”, možete odabrati ovo:

Ili ako želite povećati konverziju prodaje s “skočnim prozorom za promociju proizvoda”, vaš skočni prozor može biti dizajniran ovako:

Možete nakratko prilagoditi svoju poruku na temelju ponašanja posjetitelja kako biste povećali pretvorbu, angažman i stopu prodaje. Također, Popupsmart svojim korisnicima omogućuje instaliranje skočnih prozora 1 minuta koji su kompatibilni sa svim platformama web stranica.

Nakon odabira vašeg poslovnog cilja i kompatibilnih skočnih predložaka, prilagođavate ih i objavljujete pomoću Popupsmartova sustava prilagođenog korisniku bez ikakvih tehničkih problema.

Kako biste stvorili Wix skočne prozore i Squarespace skočne prozore, možete koristiti Popupsmart budući da se integrira s ovim alatima za izradu web stranica.

Nadam se da će vas ovaj članak uputiti kako jednostavno izraditi skočne prozore. Možete ih pokušati napraviti s HTML, CSS ili JavaScript. Međutim, da ne gubite vrijeme, da pripremite najatraktivnije skočne prozore i što je najvažnije da provjerite svoje konverzije, trebali biste odabrati Popupsmart!

Da biste temeljito ispitali Popupsmartov dizajn, trebali biste provjeriti ovo:

Predlošci dizajna skočnih prozora

Nadalje, znate li kako stvoriti skočne prozore u WordPressu bez dodatka? Idite na povezani članak da biste saznali sada!

Povezani postovi na blogu

Povećajte angažmane svojih postova na blogu pomoću jednostavnog skočnog prozora

Pojačajte svoje YouTube Pregledi bez ometanja posjetitelja vaše web stranice

Kako stvoriti modalne CSS skočne prozore za vaše web mjesto

Hvala na vašem vremenu! 🤗