فروشگاه همواره تخفیف 2050
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

dialog

کار با تگ dialog | اموزش تگ dialog | کابرد تگ dialog
ذهن انسان محدودیتی ندارد

اموزش تگ dialog بخشی از برنامه را نشان می دهد که کاربر می تواند برای انجام یک کار با آن تعامل برقرار کند.

به عنوان مثال جعبه گفتگو ، بازرس یا پنجره.

تک dialog یک ویژگی بولی را به نام open می پذیرد که این عنصر را “فعال” می کند و به کاربران امکان تعامل با آن را می دهد.

در صورت حذف این ویژگی ، شما باید از یک اسکریپت استفاده کنید (مانند JavaScript) برای فعال کردن گفتگو در صورت لزوم ، باز و بسته شود.

Syntax

تگ dialog با عنوان محاوره ای که بین برچسب های شروع و پایان درج شده است به عنوان <dialog id = ""> </dialog> نوشته می شود. از ویژگی id می توان برای پیوند یک اسکریپت با عنصر <dialog> استفاده کرد.

مثل این:
<dialog id="">
	<p>Dialog content...</p>
	<button id="hide">Close</button>
</dialog>

مثال ها

مثال ساده از تگ dialog


در اینجا مثالی از تگ dialog که در ابتدایی ترین شکل استفاده می شود ، آورده شده است.

صفت باز اضافه شده است ، بدین معنی که گفتگو بر روی بارگذاری صفحه از قبل باز شده است.

<dialog open>
<p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> - <cite>Bertrand Russell</cite></p>
</dialog>

شروع / پایان گفتگو

برای اینکه کاربر بتواند به درستی با کادر گفتگو ارتباط برقرار کند ، باید از یک اسکریپت استفاده کنید (مانند JavaScript).

<dialog id="dialog1">
<p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> - <cite>Bertrand Russell</cite></p>
<button id="hide1">Close</button>
</dialog>
<!-- "Show" button -->
<button id="show1">Show Dialog</button>

<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {  
    var dialog1 = document.getElementById('dialog1');  
    document.getElementById('show1').onclick = function() {  
        dialog1.show();  
    };  
    document.getElementById('hide1').onclick = function() {  
        dialog1.close();  
    };  
})(); 
</script>

css در تگ dialog

با استفاده از CSS می توانید به تگ dialog اضافه کنید.

<!DOCTYPE html>
<title>Example</title>
<style>
dialog{width:200px;background-color:#F4FFEF;border:1px dotted black;}
</style>
<dialog id="dialog2">
<p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> - <cite>Bertrand Russell</cite></p>
<button id="hide2">Close</button>
</dialog>
<!-- "Show" button -->
<button id="show2">Show Dialog</button>

<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {  
    var dialog2 = document.getElementById('dialog2');  
    document.getElementById('show2').onclick = function() {  
        dialog2.show();  
    };  
    document.getElementById('hide2').onclick = function() {  
        dialog2.close();  
    };  
})(); 
</script>

دیالوگ های معین

می توانید با استفاده از روش showModal () (بر خلاف روش show () مخالف) دیالوگ های معین ایجاد کنید.


دیالوگ های معین حالت را ایجاد می کنند که پنجره اصلی تا زمانی که کاربر با گفتگو تعامل نداشته باشد نمی تواند مورد استفاده قرار گیرد (یعنی آن را ببندید).

اکثر مرورگرها رنگ پس زمینه را به سایه تیره تر نشان می دهند ، که توجه به کادر گفتگو جلب می کند.

توجه داشته باشید که برای بستن گفتگو هنوز باید از روش close () استفاده کنید (یعنی هیچ روش closeModal () وجود ندارد).

<!DOCTYPE html>
<title>Example</title>
<style>
dialog{width:200px;}
</style>
<dialog id="dialog3">
<p>By viewing this dialog you agree to give all your possessions away, join a monastery in Northern Thailand, and meditate for the rest of your life.</p>
<button id="hide3">OK</button>
</dialog>
<!-- "Show" button -->
<button id="show3">Show Dialog</button>

<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {  
    var dialog3 = document.getElementById('dialog3');  
    document.getElementById('show3').onclick = function() {  
        dialog3.showModal();  
    };  
    document.getElementById('hide3').onclick = function() {  
        dialog3.close();  
    };  
})(); 
</script>

گفتگوی های معین شیک

می توانید از کلاس شبه پس زمینه CSS :: برای تغییر رنگ زمینه مودال استفاده کنید. یعنی شما می توانید هنگام باز کردن گفتگوی معین ، رنگ یا سایه ای را که مرورگر به بقیه پنجره مرورگر می دهد ، تغییر دهید.
به عنوان مثال ، گفتگوی :: backdrop {background-color: rgba (0، ۲۵۵، ۰، ۰٫۵)؛ the زمینه را سبز می کند ، با کدورت ۰٫۵٫ 
مثل این:
 
<!DOCTYPE html>
<title>Example</title>
<style>
dialog {width:200px;background: orange;}
dialog::backdrop {background: rgba(0, 255, 0, 0.5);}
</style>
<dialog id="dialog4">
<p>Don't forget to give away all your possessions.</p>
<button id="hide4">OK</button>
</dialog>
<!-- "Show" button -->
<button id="show4">Show Dialog</button>

<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {  
    var dialog4 = document.getElementById('dialog4');  
    document.getElementById('show4').onclick = function() {  
        dialog4.showModal();  
    };  
    document.getElementById('hide4').onclick = function() {  
        dialog4.close();  
    };  
})(); 
</script>

رابط HTMLDialogElement

همانطور که در مثالهای بالا مشاهده می شود ، می توانید از JavaScript برای کنترل تگ استفاده کنید. این امر از طریق رابط HTMLDialogElement حاصل می شود.

برای اطلاعات بیشتر در مورد رابط HTMLDialogElement ، تگ dialog را ببینید.

ویژگی ها

ویژگی های تگ dialog را می توان به عنصر HTML اضافه کرد تا اطلاعات بیشتری درباره نحوه ظاهر یا رفتار آن عنصر ارائه دهد.

تگ dialog صفات زیر را می پذیرد.
AttributeDescription
openوقتی این ویژگی وجود داشته باشد ، عنصر <dialog> تعاملی است و کاربر می تواند با آن تعامل برقرار کند. هنگامی که ویژگی باز وجود ندارد ، عنصر <dialog> از کاربر پنهان می شود.

دیدگاه‌های نوشته