{"id":38895,"date":"2026-02-10T05:40:43","date_gmt":"2026-02-10T02:40:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38895"},"modified":"2026-02-10T05:40:43","modified_gmt":"2026-02-10T02:40:43","slug":"reactte-modal-bileseni-nasil-uygulanir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/","title":{"rendered":"React&#8217;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r?"},"content":{"rendered":"<h2>React&#8217;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r?<\/h2>\n<h3>Giri\u015f<\/h3>\n<p>Web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve belirli bilgileri veya etkile\u015fimleri \u00f6n plana \u00e7\u0131karan \u00f6nemli aray\u00fcz elemanlar\u0131ndan biri modal pencerelerdir. Modal, genellikle mevcut sayfan\u0131n \u00fczerine katman olarak a\u00e7\u0131lan, kullan\u0131c\u0131n\u0131n dikkatini belirli bir i\u00e7eri\u011fe \u00e7ekmek veya bir i\u015flem yapmas\u0131n\u0131 sa\u011flamak amac\u0131yla kullan\u0131lan bir diyalog kutusudur. \u00d6rne\u011fin, bir form doldurma, bir uyar\u0131 mesaj\u0131 g\u00f6sterme, bir resim galerisi veya bir onay ekran\u0131 gibi bir\u00e7ok senaryoda modallar kullan\u0131l\u0131r.<\/p>\n<p>React ile bir modal bile\u015feni olu\u015fturmak, ba\u015flang\u0131\u00e7ta basit g\u00f6r\u00fcnse de, eri\u015filebilirlik, kullan\u0131c\u0131 deneyimi, stil y\u00f6netimi ve DOM yap\u0131s\u0131 gibi bir\u00e7ok \u00f6nemli detay\u0131 beraberinde getirir. Bu makalede, React&#8217;te s\u0131f\u0131rdan kapsaml\u0131 ve eri\u015filebilir bir modal bile\u015feni nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Temel yap\u0131dan ba\u015flayarak, Portals kullan\u0131m\u0131, eri\u015filebilirlik standartlar\u0131, klavye navigasyonu, odak y\u00f6netimi, arka plan kilitleme ve ge\u00e7i\u015f efektleri gibi ileri d\u00fczey konulara de\u011finece\u011fiz.<\/p>\n<h3>Temel Modal Yap\u0131s\u0131<\/h3>\n<p>Bir modal bile\u015feni olu\u015fturman\u0131n ilk ad\u0131m\u0131, temel bir React bile\u015feni iskeleti olu\u015fturmakt\u0131r. Bu bile\u015fen, modal\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol eden bir prop almal\u0131 ve i\u00e7eri\u011fini <code>children<\/code> prop&#8217;u arac\u0131l\u0131\u011f\u0131yla render etmelidir.<\/p>\n<h4>Basit Bir Modal Bile\u015feni Olu\u015fturma<\/h4>\n<p>\u00d6ncelikle, <code>Modal.js<\/code> ad\u0131nda yeni bir dosya olu\u015ftural\u0131m:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Modal.js\nimport React from 'react';\nimport '.\/Modal.css'; \/\/ Stil dosyam\u0131z\u0131 import ediyoruz\n\nconst Modal = ({ isOpen, onClose, children, title }) => {\n  if (!isOpen) return null; \/\/ Modal a\u00e7\u0131k de\u011filse hi\u00e7bir \u015fey render etme\n\n  return (\n    <div className=\"modal-overlay\" onClick={onClose}>\n      <div className=\"modal-content\" onClick={e => e.stopPropagation()}>\n        <div className=\"modal-header\">\n          {title && <h3 className=\"modal-title\">{title}<\/h3>}\n          <button className=\"modal-close-button\" onClick={onClose}>\n            &times;\n          <\/button>\n        <\/div>\n        <div className=\"modal-body\">\n          {children}\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n};\n\nexport default Modal;<\/code><\/pre>\n<p>Bu temel yap\u0131da:<br \/>\n*   <code>isOpen<\/code>: Modal\u0131n a\u00e7\u0131k olup olmad\u0131\u011f\u0131n\u0131 kontrol eden boolean bir prop. <code>false<\/code> ise modal render edilmez.<br \/>\n*   <code>onClose<\/code>: Modal\u0131 kapatmak i\u00e7in \u00e7a\u011fr\u0131lacak bir fonksiyon. Kapatma d\u00fc\u011fmesine veya arka plana t\u0131klan\u0131ld\u0131\u011f\u0131nda tetiklenir.<br \/>\n*   <code>children<\/code>: Modal\u0131n i\u00e7inde g\u00f6sterilecek i\u00e7eri\u011fi temsil eder.<br \/>\n*   <code>title<\/code>: Modal\u0131n ba\u015fl\u0131\u011f\u0131n\u0131 belirtmek i\u00e7in iste\u011fe ba\u011fl\u0131 bir prop.<\/p>\n<p>\u015eimdi bu modal\u0131 <code>App.js<\/code> dosyam\u0131zda nas\u0131l kullanaca\u011f\u0131m\u0131za bakal\u0131m:<\/p>\n<pre><code class=\"language-jsx\">\/\/ App.js\nimport React, { useState } from 'react';\nimport Modal from '.\/Modal';\nimport '.\/App.css';\n\nfunction App() {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleOpenModal = () => {\n    setIsModalOpen(true);\n  };\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false);\n  };\n\n  return (\n    <div className=\"App\">\n      \n      <button onClick={handleOpenModal}>Modal\u0131 A\u00e7<\/button>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={handleCloseModal}\n        title=\"Ho\u015f Geldiniz!\"\n      >\n        <p>Bu bir \u00f6rnek modal i\u00e7eri\u011fidir. Daha fazla bilgi i\u00e7in l\u00fctfen devam edin.<\/p>\n        <button onClick={handleCloseModal}>Kapat<\/button>\n      <\/Modal>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n<p>Ve son olarak, <code>Modal.css<\/code> (veya tercih etti\u011finiz herhangi bir stil y\u00f6ntemi) ile modal i\u00e7in temel stilleri tan\u0131mlayal\u0131m:<\/p>\n<pre><code class=\"language-css\">\/<em> Modal.css <\/em>\/\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000; \/<em> Di\u011fer i\u00e7eriklerin \u00fczerinde olmas\u0131n\u0131 sa\u011flar <\/em>\/\n}\n\n.modal-content {\n  background-color: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n  max-width: 500px;\n  width: 90%;\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-title {\n  margin: 0;\n  font-size: 1.5em;\n}\n\n.modal-close-button {\n  background: none;\n  border: none;\n  font-size: 2em;\n  cursor: pointer;\n  color: #333;\n}\n\n.modal-close-button:hover {\n  color: #000;\n}\n\n.modal-body {\n  margin-top: 15px;\n}<\/code><\/pre>\n<p>Bu ad\u0131mlarla, temel bir React modal bile\u015feni olu\u015fturmu\u015f olursunuz. Ancak bu yap\u0131, modern web uygulamalar\u0131n\u0131n gerektirdi\u011fi t\u00fcm \u00f6zellikleri ve en iyi uygulamalar\u0131 hen\u00fcz i\u00e7ermemektedir.<\/p>\n<h3>Geli\u015fmi\u015f \u00d6zellikler ve En \u0130yi Uygulamalar<\/h3>\n<p>Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda modallar\u0131n sadece g\u00f6r\u00fcnmekten \u00f6teye ge\u00e7mesi gerekir. Eri\u015filebilirlik, do\u011fru DOM yerle\u015fimi ve geli\u015fmi\u015f kullan\u0131c\u0131 deneyimi, ba\u015far\u0131l\u0131 bir modal bile\u015feninin anahtar\u0131d\u0131r.<\/p>\n<h4>Portals Kullan\u0131m\u0131<\/h4>\n<p>Varsay\u0131lan olarak, bir React bile\u015feni render edildi\u011finde, DOM a\u011fac\u0131nda tan\u0131mland\u0131\u011f\u0131 yere yerle\u015fir. Modal durumunda, bu genellikle modal\u0131 tetikleyen d\u00fc\u011fmenin veya bile\u015fenin i\u00e7ine yerle\u015fmesi anlam\u0131na gelir. Ancak bu durum, CSS <code>z-index<\/code> sorunlar\u0131na, <code>overflow: hidden<\/code> gibi \u00fcst eleman stillerinden etkilenmeye ve genel olarak DOM yap\u0131s\u0131n\u0131n karma\u015f\u0131kla\u015fmas\u0131na neden olabilir.<\/p>\n<p><code>ReactDOM.createPortal<\/code> kullanarak, modal bile\u015fenini DOM a\u011fac\u0131nda farkl\u0131 bir yere (genellikle <code>body<\/code> etiketinin do\u011frudan alt\u0131na) yerle\u015ftirebiliriz. Bu, modal\u0131n di\u011fer t\u00fcm i\u00e7eriklerin \u00fczerinde olmas\u0131n\u0131 ve stil \u00e7ak\u0131\u015fmalar\u0131ndan etkilenmemesini sa\u011flar.<\/p>\n<p><strong>Ad\u0131m 1: <code>index.html<\/code> dosyan\u0131za bir portal hedefi ekleyin.<\/strong><br \/>\n<code>public\/index.html<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve <code><body><\/code> etiketinin sonuna do\u011fru yeni bir <code>div<\/code> ekleyin:<\/p>\n<pre><code class=\"language-html\"><!-- public\/index.html -->\n<body>\n  <noscript>You need to enable JavaScript to run this app.<\/noscript>\n  <div id=\"root\"><\/div>\n  <div id=\"modal-root\"><\/div> <!-- Yeni ekledi\u011fimiz div -->\n<\/body><\/code><\/pre>\n<p><strong>Ad\u0131m 2: <code>Modal.js<\/code> dosyas\u0131n\u0131 <code>createPortal<\/code> kullanacak \u015fekilde g\u00fcncelleyin.<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ Modal.js (Portals ile g\u00fcncellenmi\u015f hali)\nimport React, { useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/Modal.css';\n\nconst Modal = ({ isOpen, onClose, children, title }) => {\n  const modalRoot = document.getElementById('modal-root');\n  const el = useRef(document.createElement('div')); \/\/ Modal i\u00e7eri\u011fi i\u00e7in bir div olu\u015fturuyoruz\n\n  useEffect(() => {\n    \/\/ Bile\u015fen mount edildi\u011finde div'i modal-root'a ekle\n    modalRoot.appendChild(el.current);\n    \/\/ Bile\u015fen unmount edildi\u011finde div'i modal-root'tan kald\u0131r\n    return () => modalRoot.removeChild(el.current);\n  }, [modalRoot]); \/\/ modalRoot de\u011fi\u015firse useEffect'i tekrar \u00e7al\u0131\u015ft\u0131r\n\n  if (!isOpen) {\n    return null;\n  }\n\n  \/\/ createPortal ile modal i\u00e7eri\u011fini DOM'daki modal-root elementine render et\n  return ReactDOM.createPortal(\n    <div className=\"modal-overlay\" onClick={onClose} aria-modal=\"true\" role=\"dialog\" aria-labelledby=\"modal-title\">\n      <div className=\"modal-content\" onClick={e => e.stopPropagation()}>\n        <div className=\"modal-header\">\n          {title && <h3 id=\"modal-title\" className=\"modal-title\">{title}<\/h3>}\n          <button className=\"modal-close-button\" onClick={onClose}>\n            &times;\n          <\/button>\n        <\/div>\n        <div className=\"modal-body\">\n          {children}\n        <\/div>\n      <\/div>\n    <\/div>,\n    el.current \/\/ Bu div'in i\u00e7ine render et\n  );\n};\n\nexport default Modal;<\/code><\/pre>\n<p>Bu de\u011fi\u015fiklik ile modal, uygulaman\u0131z\u0131n di\u011fer DOM yap\u0131s\u0131ndan ba\u011f\u0131ms\u0131z olarak en \u00fcst katmanda render edilecektir.<\/p>\n<h4>Eri\u015filebilirlik (Accessibility)<\/h4>\n<p>Modallar\u0131n eri\u015filebilir olmas\u0131, t\u00fcm kullan\u0131c\u0131lar\u0131n (\u00f6zellikle klavye veya ekran okuyucu kullananlar) uygulaman\u0131z\u0131 sorunsuz bir \u015fekilde kullanabilmesi i\u00e7in kritik \u00f6neme sahiptir. Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri (WCAG) ve WAI-ARIA standartlar\u0131, modallar i\u00e7in belirli kurallar ve \u00f6neriler sunar.<\/p>\n<p>*   <strong><code>aria-modal=\"true\"<\/code><\/strong>: Bu \u00f6zellik, ekran okuyuculara modal a\u00e7\u0131kken arka plandaki i\u00e7eri\u011fin eri\u015filemez oldu\u011funu bildirir.<br \/>\n*   <strong><code>role=\"dialog\"<\/code> veya <code>role=\"alertdialog\"<\/code><\/strong>: Modal\u0131n amac\u0131n\u0131 belirtir. <code>dialog<\/code> genel bir diyalog kutusu i\u00e7in, <code>alertdialog<\/code> ise kullan\u0131c\u0131n\u0131n hemen bir i\u015flem yapmas\u0131 gereken (\u00f6rn. onaylama) durumlar i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong><code>aria-labelledby<\/code> ve <code>aria-describedby<\/code><\/strong>: Modal ba\u015fl\u0131\u011f\u0131n\u0131 ve a\u00e7\u0131klamas\u0131n\u0131, modal\u0131n kendisiyle ili\u015fkilendirir. Ekran okuyucular, modal a\u00e7\u0131ld\u0131\u011f\u0131nda bu etiketleri okuyarak kullan\u0131c\u0131ya ba\u011flam sa\u011flar. Yukar\u0131daki \u00f6rnekte <code>aria-labelledby=\"modal-title\"<\/code> ekledik ve ba\u015fl\u0131k <code>h3<\/code> etiketine <code>id=\"modal-title\"<\/code> verdik.<br \/>\n*   <strong>Klavye Navigasyonu<\/strong>:<br \/>\n    *   <strong><code>Escape<\/code> Tu\u015fu ile Kapatma<\/strong>: Kullan\u0131c\u0131lar\u0131n <code>Escape<\/code> tu\u015funa basarak modal\u0131 kapatabilmesi standart bir beklentidir. Bunu <code>useEffect<\/code> kullanarak implemente edebiliriz:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Modal.js i\u00e7indeki useEffect hook'una ekleyin\n    useEffect(() => {\n        const handleEscape = (event) => {\n            if (event.key === 'Escape') {\n                onClose();\n            }\n        };\n\n        if (isOpen) {\n            document.addEventListener('keydown', handleEscape);\n        }\n\n        return () => {\n            document.removeEventListener('keydown', handleEscape);\n        };\n    }, [isOpen, onClose]);<\/code><\/pre>\n<p>    *   <strong>Odak Y\u00f6netimi (Focus Management)<\/strong>:<br \/>\n        *   Modal a\u00e7\u0131ld\u0131\u011f\u0131nda, odak modal i\u00e7indeki ilk etkile\u015fimli \u00f6\u011feye (genellikle bir d\u00fc\u011fme veya giri\u015f alan\u0131) veya modal\u0131n kendisine ta\u015f\u0131nmal\u0131d\u0131r.<br \/>\n        *   Modal a\u00e7\u0131kken, <code>Tab<\/code> tu\u015fu ile navigasyon sadece modal i\u00e7indeki \u00f6\u011feler aras\u0131nda d\u00f6ng\u00fc yapmal\u0131d\u0131r. Modal d\u0131\u015f\u0131ndaki \u00f6\u011felere odaklan\u0131lmamal\u0131d\u0131r (Focus Trap).<br \/>\n        *   Modal kapat\u0131ld\u0131\u011f\u0131nda, odak modal\u0131 a\u00e7an \u00f6\u011feye geri d\u00f6nmelidir.<\/p>\n<p>        Bu, manuel olarak uygulamas\u0131 karma\u015f\u0131k olabilen bir konudur. Genellikle <code>react-focus-trap<\/code> gibi k\u00fct\u00fcphaneler kullan\u0131l\u0131r veya manuel olarak a\u015fa\u011f\u0131daki ad\u0131mlar izlenir:<\/p>\n<p>        1.  <strong>\u0130lk Odak<\/strong>: Modal a\u00e7\u0131ld\u0131\u011f\u0131nda odaklan\u0131lacak \u00f6\u011feye bir <code>ref<\/code> verin ve <code>useEffect<\/code> i\u00e7inde <code>focus()<\/code> metodunu \u00e7a\u011f\u0131r\u0131n.<br \/>\n        2.  <strong>Odak Tuza\u011f\u0131 (Focus Trap)<\/strong>: Modal\u0131n ilk ve son odaklan\u0131labilir \u00f6\u011felerini belirleyin. <code>keydown<\/code> olay dinleyicisi ile <code>Tab<\/code> tu\u015funa bas\u0131ld\u0131\u011f\u0131nda, e\u011fer odak son \u00f6\u011fede ise ilk \u00f6\u011feye, ilk \u00f6\u011fede ise son \u00f6\u011feye ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flay\u0131n.<br \/>\n        3.  <strong>\u00d6nceki Odak<\/strong>: Modal a\u00e7\u0131lmadan \u00f6nce odaklan\u0131lan \u00f6\u011feyi bir <code>ref<\/code> veya state&#8217;te saklay\u0131n ve modal kapand\u0131\u011f\u0131nda bu \u00f6\u011feye odaklanmay\u0131 geri verin.<\/p>\n<p>        Bu ad\u0131mlar\u0131 <code>Modal.js<\/code> i\u00e7inde uygulayal\u0131m:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Modal.js - Odak y\u00f6netimi eklenmi\u015f hali\n        import React, { useEffect, useRef, useCallback } from 'react';\n        import ReactDOM from 'react-dom';\n        import '.\/Modal.css';\n\n        const Modal = ({ isOpen, onClose, children, title }) => {\n          const modalRoot = document.getElementById('modal-root');\n          const el = useRef(document.createElement('div'));\n          const modalRef = useRef(null); \/\/ Modal i\u00e7eri\u011fi div'i i\u00e7in ref\n          const previouslyFocusedElement = useRef(null); \/\/ Modal a\u00e7\u0131lmadan \u00f6nceki odaklan\u0131lan element\n\n          const handleEscape = useCallback((event) => {\n            if (event.key === 'Escape') {\n              onClose();\n            }\n          }, [onClose]);\n\n          useEffect(() => {\n            modalRoot.appendChild(el.current);\n\n            return () => {\n              modalRoot.removeChild(el.current);\n            };\n          }, [modalRoot]);\n\n          useEffect(() => {\n            if (isOpen) {\n              \/\/ Modal a\u00e7\u0131ld\u0131\u011f\u0131nda, \u00f6nceki odaklan\u0131lan elementi sakla\n              previouslyFocusedElement.current = document.activeElement;\n              document.addEventListener('keydown', handleEscape);\n\n              \/\/ Modal i\u00e7eri\u011fine odaklan (veya ilk odaklan\u0131labilir \u00f6\u011feye)\n              \/\/ setTimeout kullanarak DOM'un g\u00fcncellenmesini bekliyoruz\n              setTimeout(() => {\n                if (modalRef.current) {\n                  const focusableElements = modalRef.current.querySelectorAll(\n                    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n                  );\n                  if (focusableElements.length > 0) {\n                    focusableElements[0].focus(); \/\/ \u0130lk odaklan\u0131labilir \u00f6\u011feye odaklan\n                  } else {\n                    modalRef.current.focus(); \/\/ Hi\u00e7 odaklan\u0131labilir \u00f6\u011fe yoksa modal\u0131n kendisine odaklan\n                  }\n                }\n              }, 0);\n\n              \/\/ Arka plan kayd\u0131rmay\u0131 engelle\n              document.body.style.overflow = 'hidden';\n            } else {\n              document.removeEventListener('keydown', handleEscape);\n              \/\/ Modal kapand\u0131\u011f\u0131nda, odaklan\u0131lan \u00f6nceki elemente geri d\u00f6n\n              if (previouslyFocusedElement.current) {\n                previouslyFocusedElement.current.focus();\n                previouslyFocusedElement.current = null; \/\/ Bellek s\u0131z\u0131nt\u0131s\u0131n\u0131 \u00f6nlemek i\u00e7in s\u0131f\u0131rla\n              }\n              \/\/ Arka plan kayd\u0131rmay\u0131 etkinle\u015ftir\n              document.body.style.overflow = '';\n            }\n\n            return () => {\n              document.removeEventListener('keydown', handleEscape);\n              document.body.style.overflow = ''; \/\/ Cleanup'ta da kayd\u0131rmay\u0131 etkinle\u015ftir\n            };\n          }, [isOpen, handleEscape]);\n\n\n          \/\/ Odak tuza\u011f\u0131 i\u00e7in keydown event listener\n          const handleKeyDown = useCallback((event) => {\n            if (event.key === 'Tab' && modalRef.current) {\n              const focusableElements = modalRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n              );\n              const firstElement = focusableElements[0];\n              const lastElement = focusableElements[focusableElements.length - 1];\n\n              if (event.shiftKey) { \/\/ Shift + Tab\n                if (document.activeElement === firstElement) {\n                  lastElement.focus();\n                  event.preventDefault();\n                }\n              } else { \/\/ Tab\n                if (document.activeElement === lastElement) {\n                  firstElement.focus();\n                  event.preventDefault();\n                }\n              }\n            }\n          }, []);\n\n          if (!isOpen) {\n            return null;\n          }\n\n          return ReactDOM.createPortal(\n            <div\n              className=\"modal-overlay\"\n              onClick={onClose}\n              aria-modal=\"true\"\n              role=\"dialog\"\n              aria-labelledby=\"modal-title\"\n              onKeyDown={handleKeyDown} \/\/ Tab tu\u015fu olay\u0131n\u0131 dinle\n            >\n              <div\n                className=\"modal-content\"\n                onClick={e => e.stopPropagation()}\n                ref={modalRef} \/\/ Modal i\u00e7eri\u011fi div'ine ref ata\n                tabIndex=\"-1\" \/\/ Odaklan\u0131labilir olmas\u0131n\u0131 sa\u011flar\n              >\n                <div className=\"modal-header\">\n                  {title && <h3 id=\"modal-title\" className=\"modal-title\">{title}<\/h3>}\n                  <button className=\"modal-close-button\" onClick={onClose}>\n                    &times;\n                  <\/button>\n                <\/div>\n                <div className=\"modal-body\">\n                  {children}\n                <\/div>\n              <\/div>\n            <\/div>,\n            el.current\n          );\n        };\n\n        export default Modal;<\/code><\/pre>\n<p>        Bu kod, modal\u0131n a\u00e7\u0131l\u0131p kapanmas\u0131yla odak y\u00f6netimini ve <code>Escape<\/code> tu\u015fuyla kapatma i\u015flevselli\u011fini sa\u011flar. <code>tabIndex=\"-1\"<\/code> modal i\u00e7eri\u011fine programl\u0131 olarak odaklanmay\u0131 sa\u011flar, ancak varsay\u0131lan tab s\u0131ras\u0131na dahil etmez.<\/p>\n<h4>Kullan\u0131c\u0131 Deneyimi (UX)<\/h4>\n<p>Eri\u015filebilirli\u011fin yan\u0131 s\u0131ra, iyi bir kullan\u0131c\u0131 deneyimi de modallar\u0131n vazge\u00e7ilmezidir.<\/p>\n<p>*   <strong>Arka Plan\u0131 Kilitleme (Scrolling&#8217;i Engelleme)<\/strong>: Modal a\u00e7\u0131kken, arka plandaki sayfan\u0131n kayd\u0131r\u0131lmas\u0131n\u0131 engellemek yayg\u0131n bir UX uygulamas\u0131d\u0131r. Bunu, modal a\u00e7\u0131kken <code>body<\/code> etiketine <code>overflow: hidden<\/code> stili uygulayarak yapabiliriz. Yukar\u0131daki kodda bu \u00f6zelli\u011fi <code>useEffect<\/code> i\u00e7inde ekledik.<br \/>\n*   <strong>Arka Plana T\u0131klayarak Kapatma<\/strong>: Kullan\u0131c\u0131lar genellikle modal\u0131n d\u0131\u015f\u0131ndaki gri alana t\u0131klayarak modal\u0131 kapatmay\u0131 beklerler. Bu \u00f6zelli\u011fi <code>modal-overlay<\/code> div&#8217;ine <code>onClick={onClose}<\/code> prop&#8217;unu ekleyerek zaten implemente etmi\u015ftik.<br \/>\n*   <strong>Ge\u00e7i\u015f Efektleri (Transitions\/Animations)<\/strong>: Modallar\u0131n aniden belirmesi yerine, yumu\u015fak bir giri\u015f\/\u00e7\u0131k\u0131\u015f animasyonu ile g\u00f6r\u00fcnmesi daha ho\u015f bir deneyim sunar. Bunu CSS <code>transition<\/code> \u00f6zellikleri ile veya <code>react-transition-group<\/code> gibi k\u00fct\u00fcphanelerle yapabiliriz.<\/p>\n<p>    <code>Modal.css<\/code> dosyam\u0131za ge\u00e7i\u015f efektleri ekleyelim:<\/p>\n<pre><code class=\"language-css\">\/<em> Modal.css - Ge\u00e7i\u015f efektleri eklenmi\u015f hali <\/em>\/\n    \/<em> ... (\u00f6nceki stiller) ... <\/em>\/\n\n    .modal-overlay {\n      \/<em> ... (\u00f6nceki stiller) ... <\/em>\/\n      opacity: 0;\n      visibility: hidden;\n      transition: opacity 0.3s ease-out, visibility 0.3s ease-out;\n    }\n\n    \/<em> isOpen prop'u ile kontrol edilen bir s\u0131n\u0131f ekleyebiliriz <\/em>\/\n    \/<em> Bu genellikle Modal bile\u015feni i\u00e7inde dinamik olarak uygulan\u0131r <\/em>\/\n    \/<em> Veya modal a\u00e7\u0131kken overlay'e bir \"is-open\" s\u0131n\u0131f\u0131 eklenir <\/em>\/\n\n    .modal-overlay[aria-modal=\"true\"] { \/<em> isOpen true oldu\u011funda bu stil uygulan\u0131r <\/em>\/\n      opacity: 1;\n      visibility: visible;\n    }\n\n    .modal-content {\n      \/<em> ... (\u00f6nceki stiller) ... <\/em>\/\n      transform: translateY(-20px); \/<em> Hafif yukar\u0131dan gelsin <\/em>\/\n      opacity: 0;\n      transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n    }\n\n    .modal-overlay[aria-modal=\"true\"] .modal-content {\n      transform: translateY(0);\n      opacity: 1;\n    }<\/code><\/pre>\n<p>    Bu ge\u00e7i\u015f efektlerini tetiklemek i\u00e7in, <code>Modal<\/code> bile\u015feninin <code>isOpen<\/code> prop&#8217;u <code>true<\/code> oldu\u011funda <code>modal-overlay<\/code> ve <code>modal-content<\/code> elementlerine dinamik olarak bir s\u0131n\u0131f (\u00f6rne\u011fin <code>modal-open<\/code>) ekleyebiliriz. Ancak <code>aria-modal=\"true\"<\/code> zaten <code>isOpen<\/code> ile birlikte geldi\u011fi i\u00e7in, CSS se\u00e7icilerimizi buna g\u00f6re ayarlayabiliriz.<\/p>\n<h4>State Y\u00f6netimi ve Kapanma Mant\u0131\u011f\u0131<\/h4>\n<p>Modal\u0131n <code>isOpen<\/code> durumunu genellikle modal\u0131 a\u00e7an ana bile\u015fen y\u00f6netir. <code>onClose<\/code> prop&#8217;u, modal\u0131n kendi i\u00e7indeki kapatma mekanizmalar\u0131n\u0131n (d\u00fc\u011fme, arka plan t\u0131klamas\u0131, Escape tu\u015fu) ana bile\u015fendeki state&#8217;i g\u00fcncellemesini sa\u011flar. B\u00fcy\u00fck uygulamalarda, \u00e7ok say\u0131da modal oldu\u011funda veya modal state&#8217;inin uygulaman\u0131n farkl\u0131 yerlerinden kontrol edilmesi gerekti\u011finde, React Context API veya Redux\/Zustand gibi global state y\u00f6netim ara\u00e7lar\u0131 kullan\u0131labilir. Bu, &#8220;prop drilling&#8221; ad\u0131 verilen durumu (prop&#8217;lar\u0131n bir\u00e7ok ara bile\u015fenden ge\u00e7irilmesi) \u00f6nler.<\/p>\n<h3>Stil Y\u00f6netimi<\/h3>\n<p>Yukar\u0131daki \u00f6rnekte temel CSS kullan\u0131ld\u0131. Ancak React ekosisteminde bir\u00e7ok stil y\u00f6ntemi bulunmaktad\u0131r:<\/p>\n<p>*   <strong>CSS Mod\u00fclleri<\/strong>: CSS s\u0131n\u0131flar\u0131n\u0131n yerel kapsamda kalmas\u0131n\u0131 sa\u011flar, \u00e7ak\u0131\u015fmalar\u0131 \u00f6nler.<br \/>\n*   <strong>Styled Components \/ Emotion<\/strong>: JavaScript i\u00e7inde CSS yazmaya olanak tan\u0131r, dinamik stiller i\u00e7in g\u00fc\u00e7l\u00fcd\u00fcr.<br \/>\n*   <strong>Tailwind CSS \/ Bootstrap<\/strong>: Utility-first veya bile\u015fen tabanl\u0131 CSS framework&#8217;leri.<\/p>\n<p>Tercih etti\u011finiz stil y\u00f6ntemini kullanarak modal\u0131n\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftirebilirsiniz. \u00d6rne\u011fin, Styled Components ile:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Modal.js - Styled Components ile\nimport React, { useEffect, useRef, useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport styled, { keyframes, css } from 'styled-components';\n\nconst fadeIn = keyframes<code>\n  from { opacity: 0; }\n  to { opacity: 1; }\n<\/code>;\n\nconst slideUp = keyframes<code>\n  from { transform: translateY(20px); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n<\/code>;\n\nconst StyledOverlay = styled.div<code>\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n  animation: ${fadeIn} 0.3s ease-out forwards;\n\n  ${props => !props.$isOpen && css<\/code>\n    animation: ${fadeIn} 0.3s ease-out reverse forwards;\n    pointer-events: none; \/<em> Kapan\u0131rken t\u0131klamalar\u0131 engelle <\/em>\/\n  <code>}\n<\/code>;\n\nconst StyledContent = styled.div<code>\n  background-color: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n  max-width: 500px;\n  width: 90%;\n  position: relative;\n  animation: ${slideUp} 0.3s ease-out forwards;\n\n  ${props => !props.$isOpen && css<\/code>\n    animation: ${slideUp} 0.3s ease-out reverse forwards;\n  <code>}\n<\/code>;\n\nconst StyledHeader = styled.div<code>\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<\/code>;\n\nconst StyledTitle = styled.h3<code>\n  margin: 0;\n  font-size: 1.5em;\n<\/code>;\n\nconst StyledCloseButton = styled.button<code>\n  background: none;\n  border: none;\n  font-size: 2em;\n  cursor: pointer;\n  color: #333;\n\n  &:hover {\n    color: #000;\n  }\n<\/code>;\n\nconst StyledBody = styled.div<code>\n  margin-top: 15px;\n<\/code>;\n\n\nconst Modal = ({ isOpen, onClose, children, title }) => {\n  const modalRoot = document.getElementById('modal-root');\n  const el = useRef(document.createElement('div'));\n  const modalRef = useRef(null);\n  const previouslyFocusedElement = useRef(null);\n\n  const handleEscape = useCallback((event) => {\n    if (event.key === 'Escape') {\n      onClose();\n    }\n  }, [onClose]);\n\n  useEffect(() => {\n    modalRoot.appendChild(el.current);\n    return () => modalRoot.removeChild(el.current);\n  }, [modalRoot]);\n\n  useEffect(() => {\n    if (isOpen) {\n      previouslyFocusedElement.current = document.activeElement;\n      document.addEventListener('keydown', handleEscape);\n\n      setTimeout(() => {\n        if (modalRef.current) {\n          const focusableElements = modalRef.current.querySelectorAll(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n          );\n          if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n          } else {\n            modalRef.current.focus();\n          }\n        }\n      }, 0);\n\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.removeEventListener('keydown', handleEscape);\n      if (previouslyFocusedElement.current) {\n        previouslyFocusedElement.current.focus();\n        previouslyFocusedElement.current = null;\n      }\n      document.body.style.overflow = '';\n    }\n\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n      document.body.style.overflow = '';\n    };\n  }, [isOpen, handleEscape]);\n\n  const handleKeyDown = useCallback((event) => {\n    if (event.key === 'Tab' && modalRef.current) {\n      const focusableElements = modalRef.current.querySelectorAll(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      );\n      const firstElement = focusableElements[0];\n      const lastElement = focusableElements[focusableElements.length - 1];\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstElement) {\n          lastElement.focus();\n          event.preventDefault();\n        }\n      } else {\n        if (document.activeElement === lastElement) {\n          firstElement.focus();\n          event.preventDefault();\n        }\n      }\n    }\n  }, []);\n\n  if (!isOpen && !el.current.children.length) { \/\/ Modal kapal\u0131ysa ve DOM'da animasyon i\u00e7in bekleyen bir \u015fey yoksa null d\u00f6nd\u00fcr\n    return null;\n  }\n\n  return ReactDOM.createPortal(\n    <StyledOverlay\n      $isOpen={isOpen} \/\/ Styled components prop'u\n      onClick={onClose}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      aria-labelledby=\"modal-title\"\n      onKeyDown={handleKeyDown}\n    >\n      <StyledContent\n        $isOpen={isOpen} \/\/ Styled components prop'u\n        onClick={e => e.stopPropagation()}\n        ref={modalRef}\n        tabIndex=\"-1\"\n      >\n        <StyledHeader>\n          {title && <StyledTitle id=\"modal-title\">{title}<\/StyledTitle>}\n          <StyledCloseButton onClick={onClose}>\n            &times;\n          <\/StyledCloseButton>\n        <\/StyledHeader>\n        <StyledBody>\n          {children}\n        <\/StyledBody>\n      <\/StyledContent>\n    <\/StyledOverlay>,\n    el.current\n  );\n};\n\nexport default Modal;<\/code><\/pre>\n<p>Bu Styled Components \u00f6rne\u011finde, modal\u0131n a\u00e7\u0131l\u0131p kapanma animasyonlar\u0131n\u0131 kontrol etmek i\u00e7in <code>$isOpen<\/code> prop&#8217;u kullan\u0131ld\u0131. <code>forwards<\/code> anahtar kelimesi animasyonun son halini korumas\u0131n\u0131 sa\u011flarken, <code>reverse<\/code> ile kapanma animasyonu tetiklenir. <code>pointer-events: none<\/code> ise kapanma animasyonu s\u0131ras\u0131nda arka plan t\u0131klamalar\u0131n\u0131 engeller.<\/p>\n<h3>Performans \u0130pu\u00e7lar\u0131<\/h3>\n<p>*   <strong>Modal i\u00e7eri\u011fini sadece a\u00e7\u0131kken render etme<\/strong>: <code>if (!isOpen) return null;<\/code> kontrol\u00fc sayesinde modal kapal\u0131yken i\u00e7eri\u011fi DOM&#8217;a eklenmez, bu da gereksiz render maliyetini \u00f6nler.<br \/>\n*   <strong>Gereksiz render&#8217;lardan ka\u00e7\u0131nma<\/strong>: Modal bile\u015feniniz karma\u015f\u0131k bir i\u00e7eri\u011fe sahipse ve prop&#8217;lar\u0131 de\u011fi\u015fmedi\u011fi halde tekrar render ediliyorsa, <code>React.memo<\/code> kullanarak performans optimizasyonu yapabilirsiniz.<\/p>\n<pre><code class=\"language-jsx\">\/\/ Modal.js'nin son sat\u0131r\u0131na ekleyin\nexport default React.memo(Modal);<\/code><\/pre>\n<h3>Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve K\u00fct\u00fcphaneler<\/h3>\n<p>Kendi modal bile\u015feninizi yazmak, \u00f6\u011frenmek ve tam kontrol sa\u011flamak i\u00e7in harika bir yoldur. Ancak \u00e7o\u011fu zaman, \u00f6zellikle zaman k\u0131s\u0131tl\u0131 oldu\u011funda veya \u00e7ok karma\u015f\u0131k eri\u015filebilirlik gereksinimleri oldu\u011funda, mevcut k\u00fct\u00fcphaneleri kullanmak daha pratik olabilir.<\/p>\n<h4>Kendi Modal Bile\u015feninizi Ne Zaman Yazmal\u0131s\u0131n\u0131z?<\/h4>\n<p>*   Uygulaman\u0131z\u0131n \u00e7ok spesifik stil veya davran\u0131\u015f gereksinimleri varsa.<br \/>\n*   E\u011fitim ama\u00e7l\u0131 veya React&#8217;in derinliklerini anlamak istiyorsan\u0131z.<br \/>\n*   Uygulaman\u0131z\u0131n boyutunu k\u00fc\u00e7\u00fck tutmak ve gereksiz ba\u011f\u0131ml\u0131l\u0131klardan ka\u00e7\u0131nmak istiyorsan\u0131z.<br \/>\n*   Mevcut k\u00fct\u00fcphanelerin sa\u011flad\u0131\u011f\u0131 \u00f6zelliklerin fazlas\u0131n\u0131 veya eksi\u011fini istiyorsan\u0131z.<\/p>\n<h4>Mevcut K\u00fct\u00fcphaneler<\/h4>\n<p>React ekosisteminde bir\u00e7ok olgun ve iyi bak\u0131m\u0131 yap\u0131lm\u0131\u015f modal k\u00fct\u00fcphanesi bulunmaktad\u0131r:<\/p>\n<p>*   <strong><code>react-modal<\/code><\/strong>: Pop\u00fcler ve kapsaml\u0131 bir k\u00fct\u00fcphanedir. Eri\u015filebilirlik odakl\u0131d\u0131r ve bir\u00e7ok \u00f6zelle\u015ftirme se\u00e7ene\u011fi sunar.<br \/>\n*   <strong><code>@reach\/dialog<\/code><\/strong>: Reach UI projesinin bir par\u00e7as\u0131d\u0131r ve eri\u015filebilirlik ve basitlik \u00fczerine odaklan\u0131r. Daha az \u00f6zelle\u015ftirme se\u00e7ene\u011fi sunsa da, sa\u011flam bir temel sa\u011flar.<br \/>\n*   <strong>UI K\u00fct\u00fcphanelerinin Modal Bile\u015fenleri<\/strong>: E\u011fer uygulaman\u0131zda zaten Material-UI, Ant Design, Chakra UI gibi bir UI k\u00fct\u00fcphanesi kullan\u0131yorsan\u0131z, genellikle bu k\u00fct\u00fcphanelerin kendi modal veya diyalog bile\u015fenlerini kullanmak en iyi yakla\u015f\u0131md\u0131r. Bu, tasar\u0131m tutarl\u0131l\u0131\u011f\u0131n\u0131 ve entegrasyon kolayl\u0131\u011f\u0131n\u0131 sa\u011flar.<\/p>\n<p>Bu k\u00fct\u00fcphanelerin her birinin kendine g\u00f6re avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r. Se\u00e7im yaparken projenizin gereksinimlerini, mevcut teknoloji y\u0131\u011f\u0131n\u0131n\u0131 ve geli\u015ftirici deneyimini g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z \u00f6nemlidir.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>React&#8217;te bir modal bile\u015feni uygulamak, sadece bir div&#8217;i g\u00f6stermekten \u00e7ok daha fazlas\u0131d\u0131r. Eri\u015filebilirlik, kullan\u0131c\u0131 deneyimi, do\u011fru DOM yerle\u015fimi ve performans gibi bir\u00e7ok fakt\u00f6r\u00fc dikkatlice ele almak, uygulaman\u0131z\u0131n kalitesini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu makalede, temel bir modal yap\u0131s\u0131ndan ba\u015flayarak, Portals kullan\u0131m\u0131, kapsaml\u0131 eri\u015filebilirlik (klavye navigasyonu ve odak tuza\u011f\u0131 dahil), arka plan kilitleme, ge\u00e7i\u015f efektleri ve \u00e7e\u015fitli stil y\u00f6ntemleri gibi ileri d\u00fczey konular\u0131 detayl\u0131 bir \u015fekilde inceledik.<\/p>\n<p>Kendi modal bile\u015feninizi yazmak, React ve web standartlar\u0131 hakk\u0131nda derinlemesine bilgi edinmenizi sa\u011flayan de\u011ferli bir \u00f6\u011frenme deneyimididir. Ancak b\u00fcy\u00fck ve karma\u015f\u0131k projelerde, iyi bak\u0131m\u0131 yap\u0131lm\u0131\u015f bir k\u00fct\u00fcphane kullanmak, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rabilir ve olas\u0131 hatalar\u0131 azaltabilir. Hangi yolu se\u00e7erseniz se\u00e7in, her zaman kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in eri\u015filebilir ve keyifli bir deneyim sunmay\u0131 hedefleyin.<\/p>\n","protected":false},"excerpt":{"rendered":"React&#8217;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r?\nGiri\u015f\nWeb uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve belirli bilgileri veya etkile\u015fimle","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":[128],"tags":[],"class_list":{"0":"post-38895","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","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>React&#039;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r? - 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\/reactte-modal-bileseni-nasil-uygulanir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React&#039;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r?\" \/>\n<meta property=\"og:description\" content=\"React&#039;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r? Giri\u015f Web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve belirli bilgileri veya etkile\u015fimle\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-10T02:40:43+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React&#8217;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r?\",\"datePublished\":\"2026-02-10T02:40:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/\"},\"wordCount\":1898,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/\",\"name\":\"React'te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-10T02:40:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React&#8217;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r?\"}]},{\"@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":"React'te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r? - 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\/reactte-modal-bileseni-nasil-uygulanir\/","og_locale":"tr_TR","og_type":"article","og_title":"React'te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r?","og_description":"React'te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r? Giri\u015f Web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve belirli bilgileri veya etkile\u015fimle","og_url":"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-10T02:40:43+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React&#8217;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r?","datePublished":"2026-02-10T02:40:43+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/"},"wordCount":1898,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/","url":"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/","name":"React'te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-10T02:40:43+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/reactte-modal-bileseni-nasil-uygulanir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React&#8217;te Modal Bile\u015feni Nas\u0131l Uygulan\u0131r?"}]},{"@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\/38895","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=38895"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38895\/revisions"}],"predecessor-version":[{"id":38896,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38895\/revisions\/38896"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}