چاپ کردن این صفحه

آموزش ساخت Modal Box با استفاده از HTML و CSS3 مطلب ویژه

توسط 02 آبان, 1394 7463 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

وب سایتها برای معرفی خدماتی که در سایت قرار داده اند از باکس هایی استفاده می کنند که با HTML . CSS نوشته می شود . منظور از خدمات بخش هایی است که بیشتر از دیگر قسمت ها باید در دید باشد . مثل گارانتی یا شرایط پرداخت یا هر مورد دیگری . در ادامه می خواهم یک Modal Box برای شما طراحی کنم . شما می توانید رنگ و نوع فونت را خودتان تغییر بدهید .( مشاهده دمو )

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .

<!DOCTYPE html>
<html>
   <head>
   </head>
              <body>
              </body>
</html>

 

2. سپس باید تگ های مربوط به توضیحات را در بین تگ Body تایپ کنیم .
تگ a برای لینک باز کردن باکس مورد استفاده قرار می گیرد که می توانید آن را حذف کنید . 
id="openModal" class="modalDialog" برای شناسه گذاری دیویژن و تغییر شکل ظاهری متنی که داخل این تگ قرار گرفته است مورد استفاده قرار می گیرد . 
تگ پاراگراف هم مربوط به توضیحات است که شما می توانید از متن فارسی استفاده کنید

<body>
<a href="#openModal">Open Modal</a>
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Modal Box</h2>
        <p>This is a sample modal box that can be created using the powers of CSS3.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your
        website loads, or create a login/register form for users.</p>
    </div>
</div>
</body>

 

حالا توضیحات مربوط به باکس نوشته شد . باید با استفاده از تگ style درون تگ head شناسه های id="openModal" class="modalDialog" را فراخوانی کنیم و شکل ظاهری باکس را تغییر بدهیم .
سعی کنید تگ ها را بخش بخش تایپ کنید تا بهتر متوجه شوید هر تگ چه کاری انجام میدهد .

<head>
    <style>
    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    .close:hover { background: #00d9ff; }
    </style>
</head>

صفحه را با نام Index.html ذخیره کرده و نتیجه را در مرورگر مشاهده کنید . ( مشاهده دمو )

1 آموزش ساخت Modal Box با استفاده از HTML و CSS3

این مورد را ارزیابی کنید
(1 رای)
آخرین ویرایش در جمعه, 01 آبان 1394 ساعت 18:20

آخرین‌ها از سعید صبح خیز

تک وب دیزاین-قالب فارسی جوملا