Vue Modal Açılır Pencereleri Nasıl Oluşturulur

Vue.js ile Modal Nedir?

Vue.js, kullanıcı arayüzleri oluşturmanıza olanak tanıyan bir JavaScript framework'üdür. Açık kaynaklı bir framework olduğu için, web sitenizin bazı bileşenlerini oluşturmak için kolayca kullanabilirsiniz. Kullanıcı arayüzlerinin yanı sıra, Vue.js kullanarak tek sayfa uygulamaları da geliştirebilirsiniz.

Modallar, web sitelerinde en çok kullanılan bileşenlerden biridir. Vue modal, sitenizde dikkat çekici bölümler oluşturmanıza yardımcı olur. Örneğin, ürünleriniz ve hizmetleriniz hakkında belirli şeyleri vurgulamak için popup'lar ve diyaloglar oluşturabilirsiniz.

Vue Modal Açılır Pencere

Vue modal açılır pencereleri oluşturmak ve kullanmak oldukça kolaydır. Pratik bir şekilde oluşturulmalarının yanı sıra, bu pencereler, izleyicinin dikkatini çekmek için de faydalıdır. Bu tür açılır pencereler, bülten abonelikleri, giriş formları ve geri bildirim formları oluşturmak için kullanılabilir. Ayrıca, duyuruları ve bildirimleri göstermek için de vue modal açılır pencereleri kullanabilirsiniz.

Vue modal açılır pencereleri özelleştirilebilir, bu sayede stil, renkler ve yazı tiplerini web sitenize göre değiştirebilirsiniz. Üstelik, bu vue modal açılır pencereleri sessizdir ve etkinleştirmek için tetikleyicilere ihtiyaç duyarlar. Bu nedenle, belirli eylemlere tetikleyiciler ayarlayabilir ve modal açılır pencereleri buna göre etkinleştirebilirsiniz.

Ayrıca modal açılır pencereler son güncellenen sayfayı gösterebilir, bu nedenle yeniden yüklemeye gerek kalmaz. Sonuç olarak, aynı bilgiyi tekrar tekrar yazmanız gerekmez. Böylece formları doldururken daha az zaman harcanır!

Vue Javascript ile hem masaüstü hem de mobil cihazlar için modal açılır pencereler oluşturabilirsiniz. Peki bir vue modal nasıl yapılır? Vue.js bileşenlerini ve söz dizimini öğrendikten sonra kullanabilirsiniz. Web siteniz için özelleştirebileceğiniz pek çok şablon ve örnek kod bulunmaktadır.

Vue CLI gibi birçok online araç, vue modal projelerinizi oluşturmanıza yardımcı olur. Ayrıca, kod şablonları ile kendi kodlarınızı nasıl oluşturacağınızı öğrenmeye başlayabilirsiniz.

Ayrıca, BootstrapVue kullanarak kolayca vue modal bileşenleri oluşturabilirsiniz.

Oluşturabileceğiniz birçok spesifik vue modal bileşeni bulunmaktadır. Bu vue modal örneklerine ve özelleştirilebilir vue modallarına göz atarak vue modal bileşenleri hakkında daha fazla bilgi edinebilirsiniz.

Örneğin aşağıda verilen vue modal kodunu web sitenizin ilgili bölümlerine ekleyebilirsiniz:

<script>
export default {
  props: {
    show: Boolean
  }
}
</script>

<template>
  <Transition name="modal">
    <div v-if="show" class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <div class="modal-header">
            <slot name="header">default header</slot>
          </div>

          <div class="modal-body">
            <slot name="body">default body</slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              default footer
              <button
                class="modal-default-button"
                @click="$emit('close')"
              >OK</button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 300px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * Aşağıdaki stiller, Vue.js tarafından görünürlükleri değiştirildiğinde
 * transition="modal" özelliğine sahip elementlere otomatik olarak uygulanır.
 *
 * Bu stilleri düzenleyerek modal geçişi ile kolayca oynayabilirsiniz.
 */

.modal-enter-from {
  opacity: 0;
}

.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>

(Kaynak)

Bu kodu ekledikten sonra, nihai vue modal açılır pencere şöyle görünecektir:

Vue modal açılır pencerelerin konumunu, yazı tiplerini, renklerini değiştirebilir ve istediğiniz şekilde oynayabilirsiniz!

Popupsmart ile Kolayca Vue Modal Popup Oluşturun

Popupsmart hizmetleriniz hakkında müşterilerinizi bilgilendirecek kampanya odaklı popup'lar oluşturmanıza yardımcı olur. Bu özenle tasarlanmış popup'lar sayesinde satış dönüşümlerinizi artırabilirsiniz.

Popupsmart, detaylı hedefleme seçenekleriyle hedef kitlenize ulaşmanıza yardımcı olur. Ayrıca, Popupsmart Vue.js popup'ları ile tamamen uyumludur!

Bunların dışında, Popupsmart'ı kullanmak için kodlama bilmenize gerek yok. Kod gerektirmeyen bir araç olduğundan, popup'larınızı 5 dakika içinde tasarlayıp sitenizde kullanmaya başlayabilirsiniz! Popuplarınızı göstermek için web sitenizin başlık kısmına tek satırlık JavaScript kodunu eklemeniz yeterli.

Hadi akıllı popup oluşturucu Popupsmart ile popup oluşturmayı birlikte inceleyelim.

İlk olarak henüz yapmadıysanız kayıt olun ve Popupsmart hesabınıza giriş yapın. Ardından popup oluşturucu kontrol panelini açın.

“Yeni bir popup oluştur” kısmına tıkladıktan sonra, “İşletmenizin amacını seçin” diyen bir ekran açılacaktır.

Bu bölümden “E-posta Listenizi Büyütün” ve “Telefon Aramalarını Artırın” seçeneklerini seçerek kitlenizden e-posta ve telefon numaralarını toplayabilirsiniz. “Duyurularınızı Gösterin” ve “Ürünlerinizi Tanıtın” bölümleri, müşteri ve hizmetlerinize dair mesajlar ve güncellemeleri göstermek içindir.

“Çerez Yasalarına Uyum Sağlayın” bölümü, kitlenizden çerezleri saklama izni almanızı sağlar. “Form Gönderimini Toplayın” ise kitlenizden bilgi toplamak içindir.

Bu rehber için, “Duyurularınızı Gösterin” amacını seçtik.

İşletmenizin amacını seçtikten sonra Popup düzenleme ekranı açılacaktır. Özelleştirilebilir birçok popup şablonu mevcuttur. Şirketinize göre, “Özelleştir” bölümünde popup'ınızı düzenleyip kişiselleştirebilirsiniz.

Başlık ve açıklama kısımlarını CTA (eylem çağrısı) ifadeleri ile özelleştirebilirsiniz. Ayrıca, şablonun görselini değiştirip, ürününüzün görselini buraya ekleyebilirsiniz. Bundan sonra, “Hedef” bölümüne geçip hedef kitlenizi belirleyin.

Ardından “Yayınla” bölümüne geçip, bu kısımdan popup kodunuzu kopyalayabilirsiniz:

Bu kodu sitenize kopyalayıp yapıştırın ve Kaydet & Yayınla butonuna tıklayın!

İşte bu kadar basit! Artık popup'ınızı kullanarak şirketinizin güncellemelerini ve haberlerini duyurabilirsiniz. Popupsmart vue.js ile uyumludur ve popup'ınızı göstermek için herhangi bir eklenti veya uzantı gerektirmez.

Son Sözler

Popup'lar, satış dönüşümlerinizi artırmanın ve müşterilerinize ulaşmanın harika bir yoludur. Müşterilerinizden geri bildirim toplayabilir ve web sitenizi buna göre geliştirebilirsiniz. Ürünlerinizi tanıtmak ve özel teklifler sunmak da popup'larla mümkündür.

Vue modal popup'ları oluşturmak kolaydır ve bunlar özelleştirilebilir olduğundan, markanızın tarzına uygun bir popup'ı özgürce yapabilirsiniz.

Popupsmart, vue.js ile sorunsuz bir şekilde entegre olur. Kodlama bilginiz olmasa bile Popupsmart ile popup'larınızı oluşturabilirsiniz.

Web siteniz için nasıl vue modal popup'lar oluşturabileceğinizi detaylı bir şekilde açıkladık. Lütfen vue modal popup'ları neden kullandığınızı ve önerilerinizi yorumlarda bizimle paylaşın! :-)

Bu blog yazılarını da inceleyin: