آموزش W3CSS

آموزش W3.CSS – پنجره ی محاوره ای (Modal Dialog)

می توانید بجای استفاده از پیام اخطار استانداردِ جاوا اسکریپت، از پنجره ی محاوره ی مدالِ W3.CSS استفاده کنین که قابلیت تغییر هم داره.

برای تعریف سطرها و ستون های این پنجره، به ترتیب از کلاس هایِ w3-row و w3-col استفاده میشه.

نام کلاس

توضیحات

modal-dialog

برای تعریفِ پنجره ی محاوره ای، پنجره ی والد اصلی را نمایش میده.

w3-modal-dialog

Container محتوایِ پنجره ی محاوره ای را نمایش میده.

w3-modal-content

محتوای پنجره ی محاوره ای را نمایش میده.

مثال

w3css_modal_dialog.htm

<html>
   <head>
      <title>The W3.CSS Modal dialog</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body class="w3-container"> 
      <h2>Modal dialog Demo</h2>
      <a class="w3-btn w3-teal" href="#model-dialog">Open a Modal dialog</a>
      <div id="model-dialog" class="w3-modal">
         <div class="w3-modal-dialog">
            <div class="w3-modal-content w3-card-8">
               <header class="w3-container w3-teal"> 
                  <a href="#" class="w3-closebtn">×</a>
                  <h2>SoftSkill</h2>
               </header>
               <div class="w3-container">
                  <p>Hello World!</p>        
               </div>
               <footer class="w3-container w3-teal">
                  <p>@softskill</p>
               </footer>
            </div>
         </div>
      </div>      
   </body>
</html>

نتیجه

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...