آذر 24, 1398

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

    By آبان 02, 1394 7312 دیدگاه (1)

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

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

    نوشتن دیدگاه

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

    آخرین مطالب آموزشی

    «
    • 1
    • 2
    • 3
    »

    گالری پست

    چطور می توانید متوجه شوید که در اندروید چه برنامه ای را بیش از همه استفاده می کنید ؟

    چطور می توانید وضعیت فعالیت خود را در اینستاگرام پنهان کنید

    موس Trackball چیست و چرا شما نیاز به موس Trackball دارید ؟

    ارسال فکس از طریق تلفن همراه

    چطور داریور کارت گرافیک خود را برای بهتر شدن عملکرد در بازی بروز رسانی کنیم

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

    تماس از طریق WiFi calling و روش فعال کردن آن در گوشیهای اندروید

    چگونه پسورد آنلاین قوی بسازیم که به سختی هک شود ؟

    قبل از فعال کردن تایید دو مرحله ای این مقاله را بخوانید

    © 2018 Your Company. All Rights Reserved. Designed By Tripples

    Please publish modules in offcanvas position.

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