{"id":3072,"date":"2024-11-05T21:30:14","date_gmt":"2024-11-05T18:30:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/"},"modified":"2024-11-05T21:30:14","modified_gmt":"2024-11-05T18:30:14","slug":"elemani-modallar-diyaloglar-ve-cekmeceler-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/","title":{"rendered":"“ Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma"},"content":{"rendered":"

`

` Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma<\/p>\n

Web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131lan bir\u00e7ok y\u00f6ntem vard\u0131r. Bu y\u00f6ntemlerden biri de kullan\u0131c\u0131 aray\u00fcz\u00fcne ek olarak, ek bilgi veya etkile\u015fim sa\u011flayan modal pencereler, diyaloglar ve \u00e7ekmecelerdir. Bu konuda HTML `

` eleman\u0131, geli\u015ftiricilere bu aray\u00fcz \u00f6\u011felerini daha kolay ve standart bir \u015fekilde olu\u015fturma imkan\u0131 sunmaktad\u0131r. <\/p>\n

`` Eleman\u0131 Nedir?<\/h2>\n

`

` eleman\u0131, HTML5 standard\u0131na eklenen yeni bir etikettir. Bu etiket, kullan\u0131c\u0131 etkile\u015fimini gerektiren veya ek bilgi sa\u011flayan k\u00fc\u00e7\u00fck, ge\u00e7ici pencereler olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. <\/p>\n

Geli\u015ftiricilerin kendi \u00f6zelle\u015ftirmelerini yapmalar\u0131na olanak sa\u011flayan bir yap\u0131ya sahiptir. \u00d6rne\u011fin, `

` eleman\u0131 i\u00e7erisinde HTML etiketleri, CSS ile stilleme ve JavaScript ile etkile\u015fim kullanarak modallar, diyaloglar ve \u00e7ekmeceler olu\u015fturulabilir. Bu \u00f6zelli\u011fi sayesinde, kullan\u0131c\u0131 deneyimini geli\u015ftirmek i\u00e7in daha fazla esneklik sa\u011flar.<\/p>\n

`` Eleman\u0131n\u0131 Kullanarak Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma<\/h2>\n

Modal Pencereler<\/h3>\n

Modal pencereler, kullan\u0131c\u0131 di\u011fer i\u00e7eriklerle etkile\u015fime girmeden \u00f6nce kapat\u0131lmas\u0131 gereken bir pencere t\u00fcr\u00fcd\u00fcr. Genelde bir butona t\u0131kland\u0131\u011f\u0131nda veya bir i\u015flem ger\u00e7ekle\u015fti\u011finde a\u00e7\u0131l\u0131r ve kullan\u0131c\u0131 eylemini beklemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n

A\u015fa\u011f\u0131daki \u00f6rnek, bir “Kaydet” butonuna t\u0131kland\u0131\u011f\u0131nda a\u00e7\u0131lan bir modal pencere g\u00f6stermektedir:<\/p>\n

“`html
\n
\n
\n
\n Modal Pencere \u00d6rne\u011fi<\/title><\/p>\n<style>\n dialog {\n border: 1px solid #ccc;\n padding: 10px;\n width: 300px;\n }\n <\/style>\n<p><\/head><br \/>\n<body><br \/>\n <button id=\"openModal\">Kaydet<\/button><br \/>\n <dialog id=\"myDialog\"><\/p>\n<form method=\"dialog\">\n <label for=\"name\">Ad\u0131n\u0131z:<\/label><br \/>\n <input type=\"text\" id=\"name\" name=\"name\"><\/p>\n<p> <button type=\"submit\">Kaydet<\/button><br \/>\n <button type=\"reset\">\u0130ptal<\/button><br \/>\n <\/form>\n<p> <\/dialog><\/p>\n<p> <script>\n const openModalBtn = document.getElementById(\"openModal\");\n const myDialog = document.getElementById(\"myDialog\");<\/p>\n<p> openModalBtn.addEventListener(\"click\", () => {\n myDialog.showModal();\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><br \/>\n“`<\/p>\n<h3>Diyaloglar<\/h3>\n<p>Diyaloglar, kullan\u0131c\u0131dan bilgi veya onay isteyen pencerelerdir. Genellikle kullan\u0131c\u0131n\u0131n bir i\u015flem yapmas\u0131n\u0131 gerektiren durumlarda kullan\u0131l\u0131r. <\/p>\n<p>A\u015fa\u011f\u0131daki \u00f6rnek, kullan\u0131c\u0131n\u0131n bir dosyay\u0131 silmeden \u00f6nce onay vermesini isteyen bir diyalog penceresi g\u00f6stermektedir:<\/p>\n<p>“`html<br \/>\n<!DOCTYPE html><br \/>\n<html><br \/>\n<head><br \/>\n <title>Diyalog Pencere \u00d6rne\u011fi<\/title><\/p>\n<style>\n dialog {\n border: 1px solid #ccc;\n padding: 10px;\n width: 300px;\n }\n <\/style>\n<p><\/head><br \/>\n<body><br \/>\n <button id=\"openDialog\">Dosyay\u0131 Sil<\/button><br \/>\n <dialog id=\"myDialog\"><\/p>\n<p>Bu dosyay\u0131 silmek istedi\u011finizden emin misiniz?<\/p>\n<p> <button id=\"confirm\">Evet<\/button><br \/>\n <button id=\"cancel\">Hay\u0131r<\/button><br \/>\n <\/dialog><\/p>\n<p> <script>\n const openDialogBtn = document.getElementById(\"openDialog\");\n const myDialog = document.getElementById(\"myDialog\");\n const confirmBtn = document.getElementById(\"confirm\");\n const cancelBtn = document.getElementById(\"cancel\");<\/p>\n<p> openDialogBtn.addEventListener(\"click\", () => {\n myDialog.showModal();\n });<\/p>\n<p> confirmBtn.addEventListener(\"click\", () => {\n \/\/ Dosya silme i\u015flemini ger\u00e7ekle\u015ftirin\n myDialog.close();\n });<\/p>\n<p> cancelBtn.addEventListener(\"click\", () => {\n myDialog.close();\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><br \/>\n“`<\/p>\n<h3>\u00c7ekmeceler<\/h3>\n<p>\u00c7ekmeceler, genellikle ek i\u00e7erik veya se\u00e7enekleri g\u00f6stermek i\u00e7in kullan\u0131l\u0131r. Genellikle ana i\u00e7erik alan\u0131n\u0131n kenar\u0131ndan kayarak a\u00e7\u0131l\u0131r.<\/p>\n<p>`<dialog>` eleman\u0131 ile \u00e7ekmeceler olu\u015ftururken, CSS kullanarak \u00e7ekmeceyi konumland\u0131rman\u0131z gerekir. A\u015fa\u011f\u0131daki \u00f6rnek, sa\u011fdan kayarak a\u00e7\u0131lan bir \u00e7ekmece g\u00f6stermektedir:<\/p>\n<p>“`html<br \/>\n<!DOCTYPE html><br \/>\n<html><br \/>\n<head><br \/>\n <title>\u00c7ekmece \u00d6rne\u011fi<\/title><\/p>\n<style>\n dialog {\n position: fixed;\n top: 0;\n right: 0;\n width: 300px;\n height: 100%;\n background-color: #fff;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n transform: translateX(100%);\n transition: transform 0.3s ease-in-out;\n }<\/p>\n<p> dialog.open {\n transform: translateX(0);\n }\n <\/style>\n<p><\/head><br \/>\n<body><br \/>\n <button id=\"openDrawer\">\u00c7ekmeceyi A\u00e7<\/button><br \/>\n <dialog id=\"myDialog\"><\/p>\n<h2>\u00c7ekmece \u0130\u00e7eri\u011fi<\/h2>\n<p>Bu \u00e7ekmece, ek i\u00e7erik veya se\u00e7enekler g\u00f6sterebilir.<\/p>\n<p> <button id=\"closeDrawer\">Kapat<\/button><br \/>\n <\/dialog><\/p>\n<p> <script>\n const openDrawerBtn = document.getElementById(\"openDrawer\");\n const myDialog = document.getElementById(\"myDialog\");\n const closeDrawerBtn = document.getElementById(\"closeDrawer\");<\/p>\n<p> openDrawerBtn.addEventListener(\"click\", () => {\n myDialog.showModal();\n myDialog.classList.add(\"open\");\n });<\/p>\n<p> closeDrawerBtn.addEventListener(\"click\", () => {\n myDialog.classList.remove(\"open\");\n myDialog.close();\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><br \/>\n“`<\/p>\n<h2>`<dialog>` Eleman\u0131n\u0131n Avantajlar\u0131<\/h2>\n<p>HTML `<dialog>` eleman\u0131n\u0131n kullan\u0131m\u0131, baz\u0131 \u00f6nemli avantajlar sunmaktad\u0131r:<\/p>\n<ul>\n<li>Standart bir \u015fekilde modallar, diyaloglar ve \u00e7ekmeceler olu\u015fturma imkan\u0131 sa\u011flar.<\/li>\n<li>Daha az kod ile daha temiz ve d\u00fczenli HTML yap\u0131lar\u0131 olu\u015fturulmas\u0131n\u0131 sa\u011flar.<\/li>\n<li>Kullan\u0131c\u0131 etkile\u015fimini y\u00f6netmek i\u00e7in daha basit ve kullan\u0131c\u0131 dostu bir y\u00f6ntem sunar.<\/li>\n<li>Eri\u015filebilirlik a\u00e7\u0131s\u0131ndan daha iyi bir deneyim sunar.<\/li>\n<\/ul>\n<h2>`<dialog>` Eleman\u0131n\u0131 Kullan\u0131rken Dikkat Edilmesi Gereken Noktalar<\/h2>\n<p>`<dialog>` eleman\u0131n\u0131 kullan\u0131rken baz\u0131 noktalara dikkat etmek \u00f6nemlidir:<\/p>\n<ul>\n<li>`<dialog>` eleman\u0131, i\u00e7erisinde genellikle bir form veya bir dizi buton i\u00e7erir.<\/li>\n<li>`showModal()` ve `close()` metodlar\u0131, `<dialog>` eleman\u0131n\u0131 a\u00e7\u0131p kapatmak i\u00e7in kullan\u0131l\u0131r.<\/li>\n<li>Eri\u015filebilirlik i\u00e7in, `<dialog>` eleman\u0131 i\u00e7erisinde bir `aria-label` veya `aria-labelledby` \u00f6zniteli\u011fi kullan\u0131lmas\u0131 \u00f6nerilir.<\/li>\n<\/ul>\n<h2>Sonu\u00e7<\/h2>\n<p>HTML `<dialog>` eleman\u0131, modallar, diyaloglar ve \u00e7ekmeceler gibi kullan\u0131c\u0131 aray\u00fcz\u00fc \u00f6\u011felerini olu\u015fturmak i\u00e7in kolay ve standart bir yol sunar. Bu eleman, daha temiz HTML yap\u0131lar\u0131 olu\u015fturmaya, kullan\u0131c\u0131 etkile\u015fimini y\u00f6netmeyi kolayla\u015ft\u0131rmaya ve daha eri\u015filebilir bir kullan\u0131c\u0131 deneyimi sa\u011flamaya yard\u0131mc\u0131 olur.<\/p>\n<p>Siz de web sitenizde veya web uygulamalar\u0131n\u0131zda bu eleman\u0131 kullanarak kullan\u0131c\u0131 deneyimini iyile\u015ftirebilirsiniz. Daha fazla bilgi i\u00e7in **[fatihsoysal.com](https:\/\/fatihsoysal.com)** adresini ziyaret edebilirsiniz.<\/p>\n<p>## #Etiketler<\/p>\n<p>#dialog #modal #diyalog #\u00e7ekmece #html #html5 #webgeli\u015ftirme #kullan\u0131c\u0131aray\u00fcz\u00fc #kullan\u0131c\u0131deneyimi #eri\u015filebilirlik #websitedesign #webdevelopment #webdesign #css #javascript <\/p>\n","protected":false},"excerpt":{"rendered":"“ Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma Web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131lan bir\u00e7ok y\u00f6ntem vard\u0131r.…","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":[1],"tags":[],"class_list":{"0":"post-3072","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","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>`` Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma<\/title>\n<meta name=\"description\" content=\"Web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131lan bir\u00e7ok y\u00f6ntem vard\u0131r. Bu y\u00f6ntemlerden biri de kullan\u0131c\u0131 aray\u00fcz\u00fcne ek olarak, ek bilgi veya etkile\u015fim sa\u011flayan modal pencereler, diyaloglar ve \u00e7ekmecelerdir. Bu konuda HTML `` eleman\u0131, geli\u015ftiricilere bu aray\u00fcz \u00f6\u011felerini daha kolay ve standart bir \u015fekilde olu\u015fturma imkan\u0131 sunmaktad\u0131r.\" \/>\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\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"`` Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"Web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131lan bir\u00e7ok y\u00f6ntem vard\u0131r. Bu y\u00f6ntemlerden biri de kullan\u0131c\u0131 aray\u00fcz\u00fcne ek olarak, ek bilgi veya etkile\u015fim sa\u011flayan modal pencereler, diyaloglar ve \u00e7ekmecelerdir. Bu konuda HTML `` eleman\u0131, geli\u015ftiricilere bu aray\u00fcz \u00f6\u011felerini daha kolay ve standart bir \u015fekilde olu\u015fturma imkan\u0131 sunmaktad\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-05T18:30:14+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=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"“ Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma\",\"datePublished\":\"2024-11-05T18:30:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/\"},\"wordCount\":627,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/\",\"name\":\"`` Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-11-05T18:30:14+00:00\",\"description\":\"Web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131lan bir\u00e7ok y\u00f6ntem vard\u0131r. Bu y\u00f6ntemlerden biri de kullan\u0131c\u0131 aray\u00fcz\u00fcne ek olarak, ek bilgi veya etkile\u015fim sa\u011flayan modal pencereler, diyaloglar ve \u00e7ekmecelerdir. Bu konuda HTML `` eleman\u0131, geli\u015ftiricilere bu aray\u00fcz \u00f6\u011felerini daha kolay ve standart bir \u015fekilde olu\u015fturma imkan\u0131 sunmaktad\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"“ Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma\"}]},{\"@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":"`` Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma","description":"Web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131lan bir\u00e7ok y\u00f6ntem vard\u0131r. Bu y\u00f6ntemlerden biri de kullan\u0131c\u0131 aray\u00fcz\u00fcne ek olarak, ek bilgi veya etkile\u015fim sa\u011flayan modal pencereler, diyaloglar ve \u00e7ekmecelerdir. Bu konuda HTML `` eleman\u0131, geli\u015ftiricilere bu aray\u00fcz \u00f6\u011felerini daha kolay ve standart bir \u015fekilde olu\u015fturma imkan\u0131 sunmaktad\u0131r.","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\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"`` Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma","og_description":"Web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131lan bir\u00e7ok y\u00f6ntem vard\u0131r. Bu y\u00f6ntemlerden biri de kullan\u0131c\u0131 aray\u00fcz\u00fcne ek olarak, ek bilgi veya etkile\u015fim sa\u011flayan modal pencereler, diyaloglar ve \u00e7ekmecelerdir. Bu konuda HTML `` eleman\u0131, geli\u015ftiricilere bu aray\u00fcz \u00f6\u011felerini daha kolay ve standart bir \u015fekilde olu\u015fturma imkan\u0131 sunmaktad\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-11-05T18:30:14+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"“ Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma","datePublished":"2024-11-05T18:30:14+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/"},"wordCount":627,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/","name":"`` Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-11-05T18:30:14+00:00","description":"Web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131lan bir\u00e7ok y\u00f6ntem vard\u0131r. Bu y\u00f6ntemlerden biri de kullan\u0131c\u0131 aray\u00fcz\u00fcne ek olarak, ek bilgi veya etkile\u015fim sa\u011flayan modal pencereler, diyaloglar ve \u00e7ekmecelerdir. Bu konuda HTML `` eleman\u0131, geli\u015ftiricilere bu aray\u00fcz \u00f6\u011felerini daha kolay ve standart bir \u015fekilde olu\u015fturma imkan\u0131 sunmaktad\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/elemani-modallar-diyaloglar-ve-cekmeceler-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"“ Eleman\u0131: Modallar, Diyaloglar ve \u00c7ekmeceler Olu\u015fturma"}]},{"@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\/3072","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=3072"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3072\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=3072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=3072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=3072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}