{"id":36098,"date":"2025-12-08T07:40:47","date_gmt":"2025-12-08T04:40:47","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36098"},"modified":"2025-12-08T07:40:47","modified_gmt":"2025-12-08T04:40:47","slug":"vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/","title":{"rendered":"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur?"},"content":{"rendered":"<h2>Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur?<\/h2>\n<h3>Giri\u015f: Modern Web Uygulamalar\u0131nda Modal Bile\u015fenlerin \u00d6nemi<\/h3>\n<p>Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve etkile\u015fimi art\u0131rmak amac\u0131yla \u00e7e\u015fitli UI \u00f6\u011feleri kullan\u0131r. Bu \u00f6\u011felerden biri de modal pencerelerdir. Modal pencereler, kullan\u0131c\u0131n\u0131n mevcut i\u00e7erikten ayr\u0131lmadan belirli bir g\u00f6revi tamamlamas\u0131, ek bilgi almas\u0131 veya bir eylemi onaylamas\u0131 gerekti\u011finde ekran\u0131n \u00fcst\u00fcnde beliren ge\u00e7ici, odaklanm\u0131\u015f aray\u00fcz \u00f6\u011feleridir. Genellikle bir arka plan \u00f6rt\u00fcs\u00fc (overlay) ile birlikte gelirler ve kullan\u0131c\u0131n\u0131n modal kapat\u0131lana kadar ana i\u00e7erikle etkile\u015fimini engellerler.<\/p>\n<p>Modal pencereler; onay kutular\u0131, formlar, detay g\u00f6sterimleri, uyar\u0131 mesajlar\u0131 ve daha bir\u00e7ok senaryoda yayg\u0131n olarak kullan\u0131l\u0131r. Ancak, bu kadar yayg\u0131n kullan\u0131lan bir bile\u015fenin do\u011fru bir \u015fekilde tasarlanmas\u0131 ve uygulanmas\u0131, hem kullan\u0131c\u0131 deneyimi hem de eri\u015filebilirlik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Vue.js gibi modern bir \u00f6n u\u00e7 \u00e7er\u00e7evesinde, yeniden kullan\u0131labilir ve bak\u0131m\u0131 kolay bir modal bile\u015feni olu\u015fturmak, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131rken uygulama genelinde tutarl\u0131l\u0131k sa\u011flar.<\/p>\n<p>Bu makalede, Vue.js kullanarak temel bir modal bile\u015feninin nas\u0131l olu\u015fturulaca\u011f\u0131ndan ba\u015flayarak, geli\u015fmi\u015f \u00f6zellikler, eri\u015filebilirlik (a11y) standartlar\u0131, animasyonlar ve Vue 3&#8217;\u00fcn sundu\u011fu <code>Teleport<\/code> gibi g\u00fc\u00e7l\u00fc ara\u00e7larla nas\u0131l daha sa\u011flam ve esnek bir yap\u0131ya kavu\u015fturulabilece\u011fine dair kapsaml\u0131 bir yol haritas\u0131 sunaca\u011f\u0131z. Amac\u0131m\u0131z, sadece \u00e7al\u0131\u015fan bir modal olu\u015fturmak de\u011fil, ayn\u0131 zamanda en iyi uygulamalar\u0131 takip eden, kullan\u0131c\u0131 dostu ve her senaryoya uyum sa\u011flayabilen bir bile\u015fen in\u015fa etmektir.<\/p>\n<h3>Temel Modal Yap\u0131s\u0131: \u0130lk Ad\u0131mlar<\/h3>\n<p>Bir Vue.js modal bile\u015feni olu\u015fturmaya ba\u015flarken, \u00f6ncelikle temel HTML yap\u0131s\u0131n\u0131, stilini ve g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc y\u00f6netme mekanizmalar\u0131n\u0131 anlamam\u0131z gerekir.<\/p>\n<h4>Bile\u015fen Olu\u015fturma ve Temel HTML \u015eablonu<\/h4>\n<p>\u0130lk ad\u0131m olarak, projenizde <code>components<\/code> klas\u00f6r\u00fc alt\u0131nda <code>Modal.vue<\/code> ad\u0131nda yeni bir Vue bile\u015feni dosyas\u0131 olu\u015ftural\u0131m. Bu dosya, modal\u0131m\u0131z\u0131n t\u00fcm mant\u0131\u011f\u0131n\u0131, \u015fablonunu ve stilini i\u00e7erecektir.<\/p>\n<pre><code class=\"language-vue\"><!-- Modal.vue -->\n<template>\n  <div v-if=\"isOpen\" class=\"modal-overlay\" @click.self=\"closeModal\">\n    <div class=\"modal-container\">\n      <div class=\"modal-header\">\n        <h3>Modal Ba\u015fl\u0131\u011f\u0131<\/h3>\n        <button @click=\"closeModal\" class=\"modal-close-button\">\u00d7<\/button>\n      <\/div>\n      <div class=\"modal-body\">\n        <p>Buras\u0131 modal i\u00e7eri\u011fidir.<\/p>\n      <\/div>\n      <div class=\"modal-footer\">\n        <button @click=\"closeModal\">Kapat<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  props: {\n    isOpen: {\n      type: Boolean,\n      default: false\n    }\n  },\n  emits: ['close'],\n  methods: {\n    closeModal() {\n      this.$emit('close');\n    }\n  }\n};\n<\/script>\n\n<style scoped>\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.modal-container {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  width: 90%;\n  max-width: 500px;\n  position: relative;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 15px;\n  border-bottom: 1px solid #eee;\n  padding-bottom: 10px;\n}\n\n.modal-header h3 {\n  margin: 0;\n}\n\n.modal-close-button {\n  background: none;\n  border: none;\n  font-size: 24px;\n  cursor: pointer;\n  color: #333;\n}\n\n.modal-body {\n  margin-bottom: 15px;\n}\n\n.modal-footer {\n  text-align: right;\n  border-top: 1px solid #eee;\n  padding-top: 10px;\n}\n<\/style><\/code><\/pre>\n<p>Bu temel yap\u0131da \u015funlar\u0131 g\u00f6r\u00fcyoruz:<br \/>\n*   <strong><code>modal-overlay<\/code><\/strong>: Ekran\u0131n tamam\u0131n\u0131 kaplayan yar\u0131 saydam arka plan. <code>position: fixed<\/code> ile sayfan\u0131n en \u00fcst\u00fcnde kalmas\u0131n\u0131 sa\u011fl\u0131yoruz. <code>z-index<\/code> de\u011feri, di\u011fer i\u00e7eriklerin \u00fczerinde g\u00f6r\u00fcnmesini garantiler.<br \/>\n*   <strong><code>modal-container<\/code><\/strong>: Modal\u0131n as\u0131l i\u00e7eri\u011fini bar\u0131nd\u0131ran kutu. <code>modal-overlay<\/code> i\u00e7inde ortalan\u0131r.<br \/>\n*   <strong><code>modal-header<\/code>, <code>modal-body<\/code>, <code>modal-footer<\/code><\/strong>: Modal\u0131n farkl\u0131 b\u00f6l\u00fcmlerini temsil eden semantik alanlar. Ba\u015fl\u0131k, kapatma d\u00fc\u011fmesi, ana i\u00e7erik ve alt bilgi d\u00fc\u011fmeleri burada yer al\u0131r.<br \/>\n*   <strong><code>v-if=\"isOpen\"<\/code><\/strong>: Modal\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol eden Vue direktifi. <code>isOpen<\/code> prop&#8217;u <code>true<\/code> oldu\u011funda modal render edilir, <code>false<\/code> oldu\u011funda DOM&#8217;dan kald\u0131r\u0131l\u0131r.<\/p>\n<h4>G\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc Y\u00f6netme ve Olay Yayma<\/h4>\n<p>Modal\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc y\u00f6netmek i\u00e7in <code>props<\/code> ve <code>emits<\/code> mekanizmalar\u0131n\u0131 kullan\u0131r\u0131z:<br \/>\n*   <strong><code>props: { isOpen: Boolean }<\/code><\/strong>: \u00dcst bile\u015fenden modal\u0131n a\u00e7\u0131k olup olmad\u0131\u011f\u0131n\u0131 belirten bir boolean de\u011feri al\u0131r. Bu prop, modal\u0131n ne zaman g\u00f6r\u00fcnece\u011fini kontrol eder.<br \/>\n*   <strong><code>emits: ['close']<\/code><\/strong>: Modal\u0131n kapat\u0131lmas\u0131 gerekti\u011finde \u00fcst bile\u015fene bildirmek i\u00e7in bir <code>close<\/code> olay\u0131 tan\u0131mlar\u0131z.<br \/>\n*   <strong><code>closeModal()<\/code> metodu<\/strong>: Bu metot, <code>this.$emit('close')<\/code> kullanarak <code>close<\/code> olay\u0131n\u0131 tetikler. Kapatma d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda veya overlay&#8217;e t\u0131kland\u0131\u011f\u0131nda bu metot \u00e7a\u011fr\u0131l\u0131r. <code>modal-overlay<\/code> \u00fczerindeki <code>@click.self<\/code> modifikat\u00f6r\u00fc, sadece overlay&#8217;e do\u011frudan t\u0131kland\u0131\u011f\u0131nda olay\u0131n tetiklenmesini sa\u011flar, modal i\u00e7eri\u011fine t\u0131klamalar\u0131 engeller.<\/p>\n<p>Bu temel bile\u015fen, \u00fcst bile\u015fen taraf\u0131ndan \u015fu \u015fekilde kullan\u0131labilir:<\/p>\n<pre><code class=\"language-vue\"><!-- App.vue veya ba\u015fka bir \u00fcst bile\u015fen -->\n<template>\n  <div>\n    <button @click=\"openModal\">Modal\u0131 A\u00e7<\/button>\n    <Modal :is-open=\"isModalOpen\" @close=\"closeModal\" \/>\n  <\/div>\n<\/template>\n\n<script>\nimport Modal from '.\/components\/Modal.vue';\n\nexport default {\n  components: {\n    Modal\n  },\n  data() {\n    return {\n      isModalOpen: false\n    };\n  },\n  methods: {\n    openModal() {\n      this.isModalOpen = true;\n    },\n    closeModal() {\n      this.isModalOpen = false;\n    }\n  }\n};\n<\/script><\/code><\/pre>\n<p>Bu kurulumla, temel bir modal bile\u015fenini ba\u015far\u0131yla olu\u015fturmu\u015f olursunuz. Ancak, ger\u00e7ek d\u00fcnya uygulamalar\u0131nda daha esnek, kullan\u0131c\u0131 dostu ve eri\u015filebilir bir modal i\u00e7in ek \u00f6zelliklere ihtiyac\u0131m\u0131z var.<\/p>\n<h3>Geli\u015fmi\u015f \u00d6zellikler ve En \u0130yi Uygulamalar<\/h3>\n<p>\u015eimdi modal bile\u015fenimizi daha g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 hale getirecek geli\u015fmi\u015f \u00f6zellikleri ve en iyi uygulamalar\u0131 inceleyelim.<\/p>\n<h4>Slot Kullan\u0131m\u0131 ile Esneklik<\/h4>\n<p>Modal i\u00e7eri\u011finin dinamik olmas\u0131, farkl\u0131 senaryolarda farkl\u0131 i\u00e7erikler g\u00f6stermesi gerekti\u011fi i\u00e7in Vue&#8217;nun slot mekanizmas\u0131 hayati \u00f6neme sahiptir. Slotlar, bir bile\u015fenin ebeveyn bile\u015fen taraf\u0131ndan sa\u011flanan i\u00e7erikle render edilmesini sa\u011flar.<\/p>\n<p><strong>Varsay\u0131lan Slot:<\/strong><br \/>\nModal\u0131n ana i\u00e7eri\u011fini dinamik hale getirmek i\u00e7in varsay\u0131lan bir slot kullanabiliriz:<\/p>\n<pre><code class=\"language-vue\"><!-- Modal.vue (template k\u0131sm\u0131) -->\n<template>\n  <div v-if=\"isOpen\" class=\"modal-overlay\" @click.self=\"closeModal\">\n    <div class=\"modal-container\">\n      <div class=\"modal-header\">\n        <h3><slot name=\"header\">Varsay\u0131lan Ba\u015fl\u0131k<\/slot><\/h3>\n        <button @click=\"closeModal\" class=\"modal-close-button\">\u00d7<\/button>\n      <\/div>\n      <div class=\"modal-body\">\n        <slot>Varsay\u0131lan \u0130\u00e7erik<\/slot>\n      <\/div>\n      <div class=\"modal-footer\">\n        <slot name=\"footer\">\n          <button @click=\"closeModal\">Kapat<\/button>\n        <\/slot>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/template><\/code><\/pre>\n<p><strong>Adland\u0131r\u0131lm\u0131\u015f Slotlar:<\/strong><br \/>\n<code>header<\/code> ve <code>footer<\/code> gibi belirli alanlar i\u00e7in adland\u0131r\u0131lm\u0131\u015f slotlar kullanarak modal\u0131n her bir b\u00f6l\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftirebiliriz.<\/p>\n<p>\u00dcst bile\u015fende kullan\u0131m:<\/p>\n<pre><code class=\"language-vue\"><!-- App.vue -->\n<template>\n  <div>\n    <button @click=\"openModal\">Modal\u0131 A\u00e7<\/button>\n    <Modal :is-open=\"isModalOpen\" @close=\"closeModal\">\n      <!-- Header slotu -->\n      <template #header>\n        <h2>\u00dcr\u00fcn Detaylar\u0131<\/h2>\n      <\/template>\n\n      <!-- Varsay\u0131lan slot (body) -->\n      <p>Bu, \u00f6zel olarak yerle\u015ftirilmi\u015f bir \u00fcr\u00fcn detay\u0131 i\u00e7eri\u011fidir.<\/p>\n      <img decoding=\"async\" src=\"product.jpg\" alt=\"\u00dcr\u00fcn Resmi\" style=\"max-width: 100%;\">\n\n      <!-- Footer slotu -->\n      <template #footer>\n        <button @click=\"addToCart\">Sepete Ekle<\/button>\n        <button @click=\"closeModal\">\u0130ptal<\/button>\n      <\/template>\n    <\/Modal>\n  <\/div>\n<\/template><\/code><\/pre>\n<p>Bu \u015fekilde, modal bile\u015fenimiz \u00e7ok daha esnek hale gelir ve farkl\u0131 senaryolara kolayca uyarlanabilir.<\/p>\n<h4>Kapatma Mekanizmalar\u0131 ve Klavye Etkile\u015fimi<\/h4>\n<p>Kullan\u0131c\u0131lar\u0131n modal\u0131 kapatmak i\u00e7in farkl\u0131 yollar\u0131 olmal\u0131d\u0131r.<br \/>\n*   <strong>Overlay T\u0131klamas\u0131:<\/strong> Zaten <code>@click.self=\"closeModal\"<\/code> ile uyguland\u0131.<br \/>\n*   <strong>Kapat D\u00fc\u011fmesi:<\/strong> Header i\u00e7indeki &#8220;\u00d7&#8221; d\u00fc\u011fmesi ile uyguland\u0131.<br \/>\n*   <strong>ESC Tu\u015fu:<\/strong> Klavye etkile\u015fimi i\u00e7in \u00f6nemlidir. Modal a\u00e7\u0131kken ESC tu\u015funa bas\u0131ld\u0131\u011f\u0131nda modal\u0131n kapanmas\u0131n\u0131 sa\u011flamal\u0131y\u0131z.<\/p>\n<p><code>Modal.vue<\/code> script b\u00f6l\u00fcm\u00fcne ekleyelim:<\/p>\n<pre><code class=\"language-vue\"><script>\nexport default {\n  \/\/ ... (props ve emits)\n  mounted() {\n    document.addEventListener('keydown', this.handleKeydown);\n  },\n  unmounted() {\n    document.removeEventListener('keydown', this.handleKeydown);\n  },\n  methods: {\n    closeModal() {\n      this.$emit('close');\n    },\n    handleKeydown(event) {\n      if (this.isOpen && event.key === 'Escape') {\n        this.closeModal();\n      }\n    }\n  }\n};\n<\/script><\/code><\/pre>\n<p><code>mounted<\/code> ve <code>unmounted<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131n\u0131 kullanarak event listener&#8217;\u0131 ekliyor ve kald\u0131r\u0131yoruz. Bu, performans ve bellek y\u00f6netimi a\u00e7\u0131s\u0131ndan iyi bir uygulamad\u0131r.<\/p>\n<h4>Ge\u00e7i\u015f Animasyonlar\u0131 (Transitions)<\/h4>\n<p>Modal pencerelerin aniden belirmesi veya kaybolmas\u0131, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Vue&#8217;nun <code><transition><\/code> bile\u015feni ile yumu\u015fak ge\u00e7i\u015fler ekleyebiliriz.<\/p>\n<p><code>Modal.vue<\/code> \u015fablonunu g\u00fcncelleyelim:<\/p>\n<pre><code class=\"language-vue\"><!-- Modal.vue (template k\u0131sm\u0131) -->\n<template>\n  <transition name=\"modal-fade\">\n    <div v-if=\"isOpen\" class=\"modal-overlay\" @click.self=\"closeModal\">\n      <div class=\"modal-container\">\n        <!-- ... (modal i\u00e7eri\u011fi) ... -->\n      <\/div>\n    <\/div>\n  <\/transition>\n<\/template><\/code><\/pre>\n<p>Ve ilgili CSS stillerini ekleyelim:<\/p>\n<pre><code class=\"language-vue\"><!-- Modal.vue (style k\u0131sm\u0131) -->\n<style scoped>\n\/<em> ... (\u00f6nceki stiller) ... <\/em>\/\n\n.modal-fade-enter-active,\n.modal-fade-leave-active {\n  transition: opacity 0.3s ease;\n}\n\n.modal-fade-enter-from,\n.modal-fade-leave-to {\n  opacity: 0;\n}\n\n\/<em> \u0130ste\u011fe ba\u011fl\u0131 olarak, modal konteyner i\u00e7in de animasyon ekleyebiliriz <\/em>\/\n.modal-fade-enter-active .modal-container,\n.modal-fade-leave-active .modal-container {\n  transition: transform 0.3s ease, opacity 0.3s ease;\n}\n\n.modal-fade-enter-from .modal-container,\n.modal-fade-leave-to .modal-container {\n  transform: translateY(-20px) scale(0.95);\n  opacity: 0;\n}\n<\/style><\/code><\/pre>\n<p>Bu CSS s\u0131n\u0131flar\u0131, modal\u0131n a\u00e7\u0131l\u0131p kapan\u0131rken solukla\u015fma (fade) ve hafif\u00e7e kayma\/b\u00fcy\u00fcme (slide\/scale) animasyonlar\u0131na sahip olmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>Eri\u015filebilirlik (Accessibility &#8211; A11y)<\/h4>\n<p>Eri\u015filebilir bir modal, t\u00fcm kullan\u0131c\u0131lar i\u00e7in kullan\u0131labilir olmal\u0131d\u0131r, \u00f6zellikle klavye veya ekran okuyucu kullananlar i\u00e7in.<\/p>\n<p>*   <strong>ARIA Rolleri ve Nitelikleri:<\/strong><br \/>\n    *   <code>role=\"dialog\"<\/code>: Modal\u0131n bir diyalog penceresi oldu\u011funu belirtir.<br \/>\n    *   <code>aria-modal=\"true\"<\/code>: Modal\u0131n a\u00e7\u0131k oldu\u011funu ve ana i\u00e7eri\u011fin etkile\u015fim d\u0131\u015f\u0131 oldu\u011funu ekran okuyuculara bildirir.<br \/>\n    *   <code>aria-labelledby<\/code>: Modal\u0131n ba\u015fl\u0131\u011f\u0131n\u0131 i\u015faret eder.<br \/>\n    *   <code>aria-describedby<\/code>: Modal\u0131n ana i\u00e7eri\u011fini i\u015faret eder.<\/p>\n<p>    <code>Modal.vue<\/code> \u015fablonuna ekleyelim:<\/p>\n<pre><code class=\"language-vue\"><div\n      v-if=\"isOpen\"\n      class=\"modal-overlay\"\n      @click.self=\"closeModal\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-labelledby=\"modalTitleId\"\n      :aria-describedby=\"modalBodyId\"\n    >\n      <div class=\"modal-container\">\n        <div class=\"modal-header\">\n          <h3 :id=\"modalTitleId\"><slot name=\"header\">Varsay\u0131lan Ba\u015fl\u0131k<\/slot><\/h3>\n          <button @click=\"closeModal\" class=\"modal-close-button\" :aria-label=\"closeButtonLabel\">\u00d7<\/button>\n        <\/div>\n        <div :id=\"modalBodyId\" class=\"modal-body\">\n          <slot>Varsay\u0131lan \u0130\u00e7erik<\/slot>\n        <\/div>\n        <div class=\"modal-footer\">\n          <slot name=\"footer\">\n            <button @click=\"closeModal\">Kapat<\/button>\n          <\/slot>\n        <\/div>\n      <\/div>\n    <\/div><\/code><\/pre>\n<p>    Script k\u0131sm\u0131na <code>data<\/code> veya <code>computed<\/code> ile <code>modalTitleId<\/code>, <code>modalBodyId<\/code> ve <code>closeButtonLabel<\/code> ekleyebiliriz. Benzersiz ID&#8217;ler olu\u015fturmak i\u00e7in basit bir <code>Date.now()<\/code> veya bir ID jenerat\u00f6r\u00fc kullan\u0131labilir.<\/p>\n<pre><code class=\"language-vue\"><script>\n    export default {\n      \/\/ ...\n      data() {\n        return {\n          modalTitleId: 'modal-title-' + Date.now(),\n          modalBodyId: 'modal-body-' + Date.now(),\n          closeButtonLabel: 'Modali Kapat'\n        };\n      },\n      \/\/ ...\n    };\n    <\/script><\/code><\/pre>\n<p>*   <strong>Odak Y\u00f6netimi (Focus Management):<\/strong><br \/>\n    *   <strong>Modal A\u00e7\u0131ld\u0131\u011f\u0131nda Odaklama:<\/strong> Modal a\u00e7\u0131ld\u0131\u011f\u0131nda, odaklan\u0131labilir ilk \u00f6\u011feye (genellikle bir d\u00fc\u011fme veya giri\u015f alan\u0131) veya modal\u0131n kendisine odaklan\u0131lmal\u0131d\u0131r.<br \/>\n    *   <strong>Odak Tuza\u011f\u0131 (Focus Trap):<\/strong> Kullan\u0131c\u0131 Tab tu\u015fu ile gezinirken oda\u011f\u0131n modal i\u00e7inde kalmas\u0131n\u0131 sa\u011flamak. Modal d\u0131\u015f\u0131ndaki \u00f6\u011felere odaklanmay\u0131 engellemek \u00e7ok \u00f6nemlidir.<br \/>\n    *   <strong>Modal Kapat\u0131ld\u0131\u011f\u0131nda Odaklama:<\/strong> Modal kapat\u0131ld\u0131\u011f\u0131nda, oda\u011f\u0131n modal\u0131 a\u00e7an \u00f6\u011feye geri d\u00f6nmesi gerekir.<\/p>\n<p>    Bu, en karma\u015f\u0131k eri\u015filebilirlik gereksinimlerinden biridir. Manuel olarak uygulamak yerine, bu t\u00fcr odak y\u00f6netimi i\u00e7in <code>vue-focus-lock<\/code> gibi bir k\u00fct\u00fcphane kullanmak genellikle daha kolay ve daha g\u00fcvenilirdir. Ancak, temel bir uygulama i\u00e7in:<\/p>\n<p>    1.  <strong>Odak Yakalama:<\/strong> Modal a\u00e7\u0131ld\u0131\u011f\u0131nda, ilk odaklan\u0131labilir \u00f6\u011feyi bulup ona odaklan\u0131n.<br \/>\n    2.  <strong>Odak Tuza\u011f\u0131:<\/strong> Modal i\u00e7inde Tab tu\u015fu ile gezindi\u011finizde, son \u00f6\u011feden sonra ilk \u00f6\u011feye geri d\u00f6n\u00fclmesini sa\u011flay\u0131n.<br \/>\n    3.  <strong>\u00d6nceki Oda\u011f\u0131 Saklama:<\/strong> Modal a\u00e7\u0131lmadan \u00f6nce hangi \u00f6\u011fenin odakland\u0131\u011f\u0131n\u0131 kaydedin ve modal kapand\u0131\u011f\u0131nda oda\u011f\u0131 o \u00f6\u011feye geri getirin.<\/p>\n<p>    Bu i\u015flevselli\u011fi <code>Modal.vue<\/code> bile\u015fenine ekleyelim:<\/p>\n<pre><code class=\"language-vue\"><script>\n    export default {\n      \/\/ ... (props, emits, data, methods)\n      data() {\n        return {\n          \/\/ ...\n          previouslyFocusedElement: null\n        };\n      },\n      watch: {\n        isOpen(newVal) {\n          if (newVal) {\n            this.previouslyFocusedElement = document.activeElement;\n            this.$nextTick(() => {\n              this.focusFirstElement();\n            });\n          } else {\n            this.returnFocusToPreviousElement();\n          }\n        }\n      },\n      methods: {\n        \/\/ ...\n        focusFirstElement() {\n          const focusableElements = this.$el.querySelectorAll(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n          );\n          if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n          }\n        },\n        returnFocusToPreviousElement() {\n          if (this.previouslyFocusedElement) {\n            this.previouslyFocusedElement.focus();\n            this.previouslyFocusedElement = null;\n          }\n        },\n        handleKeydown(event) {\n          if (!this.isOpen) return;\n\n          if (event.key === 'Escape') {\n            this.closeModal();\n          } else if (event.key === 'Tab') {\n            this.handleTabKey(event);\n          }\n        },\n        handleTabKey(event) {\n          const focusableElements = this.$el.querySelectorAll(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n          );\n          const firstFocusableElement = focusableElements[0];\n          const lastFocusableElement = focusableElements[focusableElements.length - 1];\n\n          if (event.shiftKey) { \/\/ Shift + Tab\n            if (document.activeElement === firstFocusableElement) {\n              lastFocusableElement.focus();\n              event.preventDefault();\n            }\n          } else { \/\/ Tab\n            if (document.activeElement === lastFocusableElement) {\n              firstFocusableElement.focus();\n              event.preventDefault();\n            }\n          }\n        }\n      }\n    };\n    <\/script><\/code><\/pre>\n<p>    Bu kod par\u00e7as\u0131, temel odak y\u00f6netimini sa\u011flar. <code>watch<\/code> \u00f6zelli\u011fi ile <code>isOpen<\/code> prop&#8217;u de\u011fi\u015fti\u011finde odaklanma ve oda\u011f\u0131 geri getirme i\u015flemlerini tetikleriz. <code>handleTabKey<\/code> metodu ise Tab tu\u015fu ile modal i\u00e7inde d\u00f6ng\u00fcsel odaklanmay\u0131 sa\u011flar.<\/p>\n<h4>Teleport Kullan\u0131m\u0131 (Vue 3)<\/h4>\n<p>Vue 3 ile birlikte gelen <code>Teleport<\/code> bile\u015feni, bir bile\u015fenin \u015fablon i\u00e7eri\u011fini DOM&#8217;un ba\u015fka bir yerine ta\u015f\u0131man\u0131za olanak tan\u0131r. Bu, modal pencereler i\u00e7in son derece faydal\u0131d\u0131r, \u00e7\u00fcnk\u00fc:<br \/>\n*   <strong>Z-index Sorunlar\u0131:<\/strong> Modal, genellikle <code>body<\/code> etiketinin do\u011frudan alt\u0131na ta\u015f\u0131narak z-index \u00e7ak\u0131\u015fmalar\u0131n\u0131 ve stil miras alma sorunlar\u0131n\u0131 \u00f6nler.<br \/>\n*   <strong>CSS Kapsamland\u0131rma:<\/strong> Bile\u015fenin bulundu\u011fu yerdeki CSS stillerinden etkilenmez.<br \/>\n*   <strong>Mant\u0131ksal Ayr\u0131m:<\/strong> Modal\u0131n mant\u0131ksal olarak bir \u00fcst bile\u015fenin par\u00e7as\u0131 olmas\u0131na ra\u011fmen, g\u00f6rsel olarak DOM&#8217;da farkl\u0131 bir yerde konumland\u0131r\u0131labilir.<\/p>\n<p><code>Modal.vue<\/code> bile\u015fenini <code>Teleport<\/code> ile g\u00fcncelleyelim:<\/p>\n<pre><code class=\"language-vue\"><!-- Modal.vue (template k\u0131sm\u0131) -->\n<template>\n  <teleport to=\"body\">\n    <transition name=\"modal-fade\">\n      <div\n        v-if=\"isOpen\"\n        class=\"modal-overlay\"\n        @click.self=\"closeModal\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-labelledby=\"modalTitleId\"\n        :aria-describedby=\"modalBodyId\"\n      >\n        <div class=\"modal-container\">\n          <div class=\"modal-header\">\n            <h3 :id=\"modalTitleId\"><slot name=\"header\">Varsay\u0131lan Ba\u015fl\u0131k<\/slot><\/h3>\n            <button @click=\"closeModal\" class=\"modal-close-button\" :aria-label=\"closeButtonLabel\">\u00d7<\/button>\n          <\/div>\n          <div :id=\"modalBodyId\" class=\"modal-body\">\n            <slot>Varsay\u0131lan \u0130\u00e7erik<\/slot>\n          <\/div>\n          <div class=\"modal-footer\">\n            <slot name=\"footer\">\n              <button @click=\"closeModal\">Kapat<\/button>\n            <\/slot>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/transition>\n  <\/teleport>\n<\/template><\/code><\/pre>\n<p><code>to=\"body\"<\/code> niteli\u011fi sayesinde, modal\u0131n t\u00fcm i\u00e7eri\u011fi (overlay ve container dahil) DOM&#8217;da <code><body><\/code> etiketinin do\u011frudan alt \u00f6\u011fesi olarak render edilecektir. Bu, modal\u0131n her zaman di\u011fer t\u00fcm i\u00e7eriklerin \u00fczerinde olmas\u0131n\u0131 garanti eder.<\/p>\n<h4>Props Do\u011frulama ve Emits Tan\u0131mlama<\/h4>\n<p>Bile\u015fenler aras\u0131 ileti\u015fimin daha sa\u011flam ve hata ay\u0131klaman\u0131n daha kolay olmas\u0131 i\u00e7in <code>props<\/code> ve <code>emits<\/code> tan\u0131mlar\u0131m\u0131z\u0131 g\u00fc\u00e7lendirmeliyiz.<\/p>\n<pre><code class=\"language-vue\"><script>\nexport default {\n  props: {\n    isOpen: {\n      type: Boolean,\n      required: true \/\/ isOpen prop'unun zorunlu olmas\u0131n\u0131 sa\u011flar\u0131z\n    },\n    title: { \/\/ Ba\u015fl\u0131k i\u00e7in do\u011frudan bir prop da alabiliriz\n      type: String,\n      default: 'Bilgi'\n    },\n    closeButtonLabel: { \/\/ Kapatma d\u00fc\u011fmesi etiketi i\u00e7in prop\n      type: String,\n      default: 'Modali Kapat'\n    }\n  },\n  emits: {\n    \/\/ 'close' olay\u0131n\u0131n ne zaman tetiklenece\u011fini ve hangi arg\u00fcmanlar\u0131 bekledi\u011fini tan\u0131mlar\u0131z\n    close: null \/\/ Ya da (payload) => { \/<em> do\u011frulama mant\u0131\u011f\u0131 <\/em>\/ return true; }\n  },\n  \/\/ ... di\u011fer kodlar\n};\n<\/script><\/code><\/pre>\n<p><code>required: true<\/code> ile <code>isOpen<\/code> prop&#8217;unun her zaman sa\u011flanmas\u0131n\u0131 garanti ederiz. <code>emits<\/code> se\u00e7ene\u011fini kullanarak, bile\u015fenin hangi \u00f6zel olaylar\u0131 yayd\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtiriz. Bu, geli\u015ftirme s\u0131ras\u0131nda potansiyel hatalar\u0131 yakalamaya yard\u0131mc\u0131 olur.<\/p>\n<h3>\u00d6rnek Kullan\u0131m Senaryolar\u0131<\/h3>\n<p>Olu\u015fturdu\u011fumuz bu kapsaml\u0131 modal bile\u015fenini farkl\u0131 senaryolarda nas\u0131l kullanabilece\u011fimize dair birka\u00e7 \u00f6rnek:<\/p>\n<h4>1. Basit Bilgi Modal\u0131<\/h4>\n<pre><code class=\"language-vue\"><template>\n  <div>\n    <button @click=\"openInfoModal\">Bilgi Modal\u0131n\u0131 A\u00e7<\/button>\n    <Modal :is-open=\"isInfoModalOpen\" @close=\"closeInfoModal\" title=\"\u00d6nemli Bilgi\">\n      <template #header>\n        <h2>Duyuru<\/h2>\n      <\/template>\n      <p>Bu, kullan\u0131c\u0131lara g\u00f6sterilmesi gereken \u00f6nemli bir duyurudur.<\/p>\n      <p>L\u00fctfen dikkatlice okuyunuz.<\/p>\n      <template #footer>\n        <button @click=\"closeInfoModal\">Tamam<\/button>\n      <\/template>\n    <\/Modal>\n  <\/div>\n<\/template>\n\n<script>\nimport Modal from '.\/components\/Modal.vue';\n\nexport default {\n  components: { Modal },\n  data() {\n    return {\n      isInfoModalOpen: false\n    };\n  },\n  methods: {\n    openInfoModal() { this.isInfoModalOpen = true; },\n    closeInfoModal() { this.isInfoModalOpen = false; }\n  }\n};\n<\/script><\/code><\/pre>\n<h4>2. Onay Modal\u0131<\/h4>\n<pre><code class=\"language-vue\"><template>\n  <div>\n    <button @click=\"openConfirmModal\">Hesab\u0131 Sil<\/button>\n    <Modal :is-open=\"isConfirmModalOpen\" @close=\"closeConfirmModal\" title=\"Onay Gerekli\">\n      <template #header>\n        <h3>Hesap Silme Onay\u0131<\/h3>\n      <\/template>\n      <p>Hesab\u0131n\u0131z\u0131 kal\u0131c\u0131 olarak silmek istedi\u011finizden emin misiniz? Bu i\u015flem geri al\u0131namaz.<\/p>\n      <template #footer>\n        <button @click=\"confirmDelete\" class=\"btn-danger\">Evet, Sil<\/button>\n        <button @click=\"closeConfirmModal\">\u0130ptal<\/button>\n      <\/template>\n    <\/Modal>\n  <\/div>\n<\/template>\n\n<script>\nimport Modal from '.\/components\/Modal.vue';\n\nexport default {\n  components: { Modal },\n  data() {\n    return {\n      isConfirmModalOpen: false\n    };\n  },\n  methods: {\n    openConfirmModal() { this.isConfirmModalOpen = true; },\n    closeConfirmModal() { this.isConfirmModalOpen = false; },\n    confirmDelete() {\n      alert('Hesap silindi!');\n      this.closeConfirmModal();\n    }\n  }\n};\n<\/script><\/code><\/pre>\n<h4>3. Form Modal\u0131<\/h4>\n<pre><code class=\"language-vue\"><template>\n  <div>\n    <button @click=\"openFormModal\">Yeni \u00dcr\u00fcn Ekle<\/button>\n    <Modal :is-open=\"isFormModalOpen\" @close=\"closeFormModal\" title=\"Yeni \u00dcr\u00fcn Ekle\">\n      <template #header>\n        <h3>Yeni \u00dcr\u00fcn Ekle<\/h3>\n      <\/template>\n      <form @submit.prevent=\"submitProduct\">\n        <div class=\"form-group\">\n          <label for=\"productName\">\u00dcr\u00fcn Ad\u0131:<\/label>\n          <input type=\"text\" id=\"productName\" v-model=\"newProduct.name\" required>\n        <\/div>\n        <div class=\"form-group\">\n          <label for=\"productPrice\">Fiyat:<\/label>\n          <input type=\"number\" id=\"productPrice\" v-model=\"newProduct.price\" required>\n        <\/div>\n        <template #footer>\n          <button type=\"submit\">Kaydet<\/button>\n          <button type=\"button\" @click=\"closeFormModal\">\u0130ptal<\/button>\n        <\/template>\n      <\/form>\n    <\/Modal>\n  <\/div>\n<\/template>\n\n<script>\nimport Modal from '.\/components\/Modal.vue';\n\nexport default {\n  components: { Modal },\n  data() {\n    return {\n      isFormModalOpen: false,\n      newProduct: {\n        name: '',\n        price: 0\n      }\n    };\n  },\n  methods: {\n    openFormModal() { this.isFormModalOpen = true; },\n    closeFormModal() { this.isFormModalOpen = false; },\n    submitProduct() {\n      console.log('Yeni \u00fcr\u00fcn:', this.newProduct);\n      alert('\u00dcr\u00fcn kaydedildi: ' + this.newProduct.name);\n      this.newProduct = { name: '', price: 0 }; \/\/ Formu s\u0131f\u0131rla\n      this.closeFormModal();\n    }\n  }\n};\n<\/script><\/code><\/pre>\n<p>Bu \u00f6rnekler, modal bile\u015fenimizin ne kadar esnek ve yeniden kullan\u0131labilir oldu\u011funu g\u00f6stermektedir. Slotlar sayesinde, modal\u0131n &#8220;kabu\u011funu&#8221; korurken i\u00e7indeki i\u00e7eri\u011fi tamamen de\u011fi\u015ftirebiliriz.<\/p>\n<h3>Alternatifler ve K\u00fct\u00fcphaneler<\/h3>\n<p>Kendi modal bile\u015feninizi in\u015fa etmek, Vue.js&#8217;i ve bile\u015fen tasar\u0131m prensiplerini derinlemesine anlamak i\u00e7in harika bir yoldur. Ayr\u0131ca, uygulaman\u0131z\u0131n tam olarak ihtiya\u00e7 duydu\u011fu \u00f6zelle\u015ftirmeleri yapman\u0131z\u0131 sa\u011flar. Ancak, her zaman s\u0131f\u0131rdan ba\u015flamak zorunda de\u011filsiniz.<\/p>\n<p>*   <strong>Ne Zaman Kendi Modal\u0131n\u0131z\u0131 \u0130n\u015fa Etmelisiniz?<\/strong><br \/>\n    *   Uygulaman\u0131z\u0131n \u00e7ok spesifik stil veya davran\u0131\u015f gereksinimleri varsa.<br \/>\n    *   Bile\u015fen k\u00fct\u00fcphanelerinin getirdi\u011fi ek ba\u011f\u0131ml\u0131l\u0131klardan ka\u00e7\u0131nmak istiyorsan\u0131z.<br \/>\n    *   \u00d6\u011frenme ve derinlemesine anlama s\u00fcrecinin bir par\u00e7as\u0131 olarak.<br \/>\n    *   Performans \u00fczerinde tam kontrol sahibi olmak istedi\u011finizde.<\/p>\n<p>*   <strong>Ne Zaman Haz\u0131r K\u00fct\u00fcphaneleri Kullanmal\u0131s\u0131n\u0131z?<\/strong><br \/>\n    *   H\u0131zl\u0131 geli\u015ftirme gereksinimleriniz varsa.<br \/>\n    *   Uygulaman\u0131z zaten bir UI k\u00fct\u00fcphanesi (\u00f6rne\u011fin Vuetify, Element UI, BootstrapVue, PrimeVue) kullan\u0131yorsa, bu k\u00fct\u00fcphanelerin kendi modal\/dialog bile\u015fenlerini kullanmak en mant\u0131kl\u0131s\u0131d\u0131r.<br \/>\n    *   Eri\u015filebilirlik ve odak y\u00f6netimi gibi karma\u015f\u0131k konularla u\u011fra\u015fmak istemiyorsan\u0131z; \u00e7o\u011fu haz\u0131r k\u00fct\u00fcphane bu konular\u0131 sizin i\u00e7in halleder.<br \/>\n    *   Tutarl\u0131 bir tasar\u0131m sistemi uygulamak istedi\u011finizde.<br \/>\n    *   <code>headlessui<\/code> gibi ba\u015fs\u0131z (headless) bile\u015fen k\u00fct\u00fcphaneleri, stil sa\u011flamadan sadece eri\u015filebilirli\u011fi ve davran\u0131\u015flar\u0131 y\u00f6neten modal bile\u015fenleri sunar. Bu, kendi stilinizi uygularken a11y avantajlar\u0131ndan yararlanman\u0131z\u0131 sa\u011flar.<\/p>\n<p>Karar, projenizin ihtiya\u00e7lar\u0131na, ekibinizin uzmanl\u0131\u011f\u0131na ve zaman k\u0131s\u0131tlamalar\u0131na ba\u011fl\u0131d\u0131r. K\u00fc\u00e7\u00fck veya orta \u00f6l\u00e7ekli projelerde kendi modal\u0131n\u0131z\u0131 in\u015fa etmek harika bir deneyim olabilirken, b\u00fcy\u00fck ve karma\u015f\u0131k projelerde haz\u0131r bir \u00e7\u00f6z\u00fcm kullanmak genellikle daha verimlidir.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Bu kapsaml\u0131 makalede, Vue.js ile s\u0131f\u0131rdan ba\u015flayarak tam \u00f6zellikli, eri\u015filebilir ve yeniden kullan\u0131labilir bir modal bile\u015feni olu\u015fturman\u0131n ad\u0131mlar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceledik. Temel HTML ve CSS yap\u0131s\u0131ndan ba\u015flayarak, <code>props<\/code> ve <code>emits<\/code> ile g\u00f6r\u00fcn\u00fcrl\u00fck y\u00f6netimine, <code>slots<\/code> ile i\u00e7erik esnekli\u011fine, klavye etkile\u015fimi ve animasyonlara kadar bir\u00e7ok konuya de\u011findik. \u00d6zellikle Vue 3&#8217;\u00fcn <code>Teleport<\/code> \u00f6zelli\u011fi ve eri\u015filebilirlik (A11y) standartlar\u0131na uyumun ne kadar \u00f6nemli oldu\u011funu vurgulad\u0131k.<\/p>\n<p>Ba\u015far\u0131l\u0131 bir modal bile\u015feni sadece g\u00f6rsel olarak \u00e7ekici olmakla kalmaz, ayn\u0131 zamanda her t\u00fcrden kullan\u0131c\u0131 i\u00e7in eri\u015filebilir ve kolay kullan\u0131labilir olmal\u0131d\u0131r. Bu makalede sundu\u011fumuz bilgiler ve kod \u00f6rnekleri, kendi Vue.js projelerinizde sa\u011flam ve etkili modal pencereler olu\u015fturman\u0131z i\u00e7in size rehberlik edecektir. Unutmay\u0131n ki, yaz\u0131l\u0131m geli\u015ftirmede oldu\u011fu gibi bile\u015fen tasar\u0131m\u0131nda da s\u00fcrekli iyile\u015ftirme ve kullan\u0131c\u0131 geri bildirimlerini dikkate alma esast\u0131r. Bu temel \u00fczerine in\u015fa ederek, ihtiya\u00e7lar\u0131n\u0131za en uygun modal \u00e7\u00f6z\u00fcm\u00fcn\u00fc yaratabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur?\nGiri\u015f: Modern Web Uygulamalar\u0131nda Modal Bile\u015fenlerin \u00d6nemi\nModern web uygulamalar\u0131","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-36098","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur?\" \/>\n<meta property=\"og:description\" content=\"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur? Giri\u015f: Modern Web Uygulamalar\u0131nda Modal Bile\u015fenlerin \u00d6nemi Modern web uygulamalar\u0131\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-08T04:40:47+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur?\",\"datePublished\":\"2025-12-08T04:40:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/\"},\"wordCount\":2030,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/\",\"name\":\"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-08T04:40:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur?","og_description":"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur? Giri\u015f: Modern Web Uygulamalar\u0131nda Modal Bile\u015fenlerin \u00d6nemi Modern web uygulamalar\u0131","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-08T04:40:47+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur?","datePublished":"2025-12-08T04:40:47+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/"},"wordCount":2030,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/","name":"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-08T04:40:47+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-kapsamli-bir-modal-bileseni-nasil-olusturulur\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue.js ile Kapsaml\u0131 Bir Modal Bile\u015feni Nas\u0131l Olu\u015fturulur?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=36098"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36098\/revisions"}],"predecessor-version":[{"id":36099,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36098\/revisions\/36099"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}