چهارشنبه , آذر ۱ ۱۳۹۶
خانه / طراحي سايت / راهنمای تهیه پنجره پاپ آپ با مصرف از jQuery

راهنمای تهیه پنجره پاپ آپ با مصرف از jQuery

راهنمای تهیه پنجره پاپ آپ با مصرف از jQuery

 
پنجره های پاپ آپ امروزه به یکی از پرکاربردترین عناصر صفحات وب تبدیل شده اند. یکی از دلایل محبوبیت این پنجره های مودال، کاهش تعداد postback ها یا رفتن از صفحه ای به صفحه دیگر است. لزومی ندارد برای نمایش پیام چند خطی و یا یک فرم کوچک مانند فرم لاگین که فقط چند فیلد دارد، کاربر را به صفحه دیگری هدایت کنیم. در این ارسال نحوه ساخت یک پنجره مودال پاپ آپ بسیار کم اندازه را شرح خواهم داد. آسانی این پنجره پاپ آپ به شما امکان میدهد به راحتی آن را برای وبسایت سفارشی بکنید .

 
مشاهده دمو پنجره مودال پاپ آپ دانـلود سورس کامل پاپ آپ

 

 
● پسورد : www.websiteha.com

 
چگونگی انجام کار روش نمایش محتوا در پاپ آپ به شرح زیر است:

    • محتوایی که می خواهیم داخل پاپ آپ نمایش داده شود، داخل یک عنصر div که دارای خصیصه id است قرار میگیرند.

 

    • برای لینکی که می خواهیم با کلیک روی آن پاپ آپ نشان داده شود، خصیصه Name را مساوی با modal قرار میدهیم. همچنین خصیصه href این لینک را مساوی با id عنصر div که محتوا در آن قرار گرفته است، قرار می دهیم. کد جاوااسکریپت نوشته شده، در داخل صفحه به دنبال لینکی که دارای خصیصه name="modal" است، جستجو می نماید پس عنصری را که در خصیصه href به آن اشاره شده، به عنوان پاپ آپ نمایش می دهد.

 

    • یک عنصر div دیگر به عنوان ماسک دودی رنگ در زیر پاپ آپ کل صفحه را می پوشاند.

کدهای HTML

 

?
۱
۲
۳
۴
۵
۶
۷
<a name="modal" href="#dialog" >www.websiteha.coma>
<div id="boxes">
<div id="dialog" class="window"><strong>Testing of Modal Windowstrong> | <a class="close" href="#">Close ita>div>
<div id="mask"div>
div>

 

کدهای CSS

 

?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
/* میزان z-index باید کمتر از #boxes .window باشد */
#mask
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
  top:0px;
  left:0px
  
  
#boxes .window
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
/* ظاهر پنجره پاپ را بوسیله این بلاک تغیر داده سفارشی بکنید */
#boxes #dialog
  width:375px;
  height:203px
  background:#fff

 

کدهای جاوااسکریپت

 

?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
$(document).ready(function()  
    //انتخاب لینک با نام مودال
    $('a[name=modal]').click(function(e)
        //لغو حالت پیش فرض عملکرد لینک
        e.preventDefault();
        //دریافت آیدی عنصر پاپ آپ
        var id = $(this).attr('href');
    
        // دریافت طول عرض صفحه نمایش
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
    
        // تنظیم طول عرض ماسک به اندازه صفحه نمایش
        $('#mask').css('width':maskWidth,'height':maskHeight);
        
        //اعمال افکت نمایش تدریجی بر روی ماسک      
        $('#mask').fadeIn(1000);   
        $('#mask').fadeTo("slow",0.8); 
    
        // دریافت طول و عرض پنجره مرورگر
        var winH = $(window).height();
        var winW = $(window).width();
              
        // تنظیم محل باز شدن پاپ آپ در مرکز صفحه
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
    
        //اعمال افکت نمایش تدریجی پاپ آپ
        $(id).fadeIn(2000);    
    );
    
    //رویداد دکمه بستن پاپ آپ
    $('.window .close').click(function (e)
        // لغو حالت پیش فرض عملکرد لینک
        e.preventDefault();
        $('#mask, .window').hide();
    );    
    
    //بسته شدن پاپ آپ با کلیک روی ماسک اطراف آن
    $('#mask').click(function ()
        $(this).hide();
        $('.window').hide();
    );
);

 

درباره ی admin

مطلب پیشنهادی

آموزش برنامه جذاب و جالب و خوب محتوا در وبسایت و مرکز خبرهای جدید ساز (قسمت و بخش ۳)

آموزش برنامه جذاب و جالب و خوب محتوا در وبسایت و مرکز خبرهای جدید ساز …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *