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

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

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

وب سایتها برای معرفی خدماتی که در سایت قرار داده اند از باکس هایی استفاده می کنند که با 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

آخرین بروز رسانیجمعه, 01 آبان 1394 18:20

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید