آموزش ساخت modal box با استفاده از html و css3

Sina

Administrator
پرسنل مدیریت
2013-05-11
4,709
2,901
113
چابکســـر


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

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

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

HTML:
<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 ذخیره کرده و نتیجه را در مرورگر مشاهده کنید .

منبع: learning.asarayan.com
 
  • Like
واکنش‌ها[ی پسندها]: hasti

درباره ما

  • خوش آمدید ؛ یه حسِ خوب یک انجمن است که شما می توانید در آن عضو شده از امکانات آن استفاده کرده و دوستان جدید پیدا کنید. این مجموعه دارای نظارت 24 ساعته بوده تا محیطی سالم را برای کاربران خود فراهم آورد،از کاربران انتظار می رود که با رعایت قوانین ما را برای رسیدن به این هدف یاری کنند.
    از طرف مدیر وب سایت:
    "همواره آرزو دارم که هربازدید کننده ای بعد از ورود به انجمن، با یه حسِ خوب اینجارو ترک کنه!"

منوی کاربر