رفتن به مطلب

Parviz

عضو سایت
  • تعداد ارسال‌ها

    2
  • تاریخ عضویت

  • آخرین بازدید

نوشته‌ها ارسال شده توسط Parviz

  1. من یکیشو پیدا کردم تقریبا شبیه اون هست میزارم دوستان استفاده کنن ولی بازم اگه اون رو بزارین خوب میشه

    <head>

    <script src="jquery.min.js" type="text/javascript"></script>

    <style type="text/css">

    body {

    margin: 0;

    padding: 0;

    background-color: #e5e5e5;

    text-align: center

    }

    .popup-screen {

    position: fixed;

    opacity: .8;

    filter: alpha(opacity=80) !important;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    background-color: #000;

    display: none

    }

    .show-popup, .login-btn {

    font: normal 12px tahoma;

    padding: 5px 12px 7px 12px;

    margin: 0;

    }

    .btn-position {

    margin-top: 200px;

    }

    .popup-win {

    min-width: 450px;

    height:300px;

    background-color: #fff;

    z-index: 10;

    position: fixed;

    display: none;

    direction:rtl;

    overflow:auto;

    padding:15px;

    [/left]

    }

    .input {

    padding: 5px;

    direction: ltr;

    font-family: tahoma;

    font-size: 12px;

    margin: 0

    }

    .close-btn {

    width: 20px;

    height: 20px;

    left: 7px;

    top: 7px;

    z-index: 100;

    background: url(images/close-icon-20px.png) no-repeat center;

    position: absolute;

    cursor: pointer;

    opacity: .7;

    filter: alpha(opacity=70);

    }

    .close-btn:hover {

    opacity: 1;

    filter: alpha(opacity=100);

    }

    .login-items {

    margin: 50px auto;

    }

    .login-items td {

    padding: 3px;

    font: normal 12px tahoma

    }

    </style>

    <script type="text/javascript">

    //----- jquery popup window ---------

    function setPosVer(){

    var $popupWin =$('.popup-win');

    var popupWinWidth=$popupWin.width();

    $popupWin.css('left',$popupWin.parent().width()/2-$popupWin.width()/2);

    };

    function setPosHor(){

    var $popupWin =$('.popup-win');

    var popupWinHeight=$popupWin.height();

    $popupWin.css('top',$(window).height()/2-$popupWin.height()/2);

    };

    $(function(){

    setPosVer();

    setPosHor();

    $('.show-popup').click(function(){

    $('.popup-screen').fadeIn(300,function(){

    $('.popup-win').slideDown();

    });

    });

    $('.close-btn').click(function(){

    $('.popup-win').slideUp(300,function(){

    $('.popup-screen').fadeOut();

    });

    });

    });

    $(window).resize(function(){

    setPosVer();

    setPosHor();

    });

    </script>

    </head>

    <body>

    <div class="popup-screen"></div>

    <div class="popup-win">

    محل قرار گرفتن محتوای پنجره

    <div class="close-btn"></div>

    </div>

    <button class="show-popup btn-position">جی کوئری پاپ آپ ویندو</button>

    </body>

    راهنمای استفاده

    کد را مطابق نمونه در دو قسمت head و body صفحه قرار دهید. در قسمت head صفحه، فایل جی کوئری به همراه استایل ها و اسکریپت مربوطه قرار دارند. بهتر است از نسخه جی کوئری که در فایل ضمیمه قرار دارد استفاده کنید. در صورتیکه بخواهید پنجره، علاوه بر دکمه "x" ، با کلیک روی محیط بیرون پنجره نیز بسته شود، کد زیر را در اسکریپت اصلی یافته و طبق نمونه بعدی قسمت نارنجی رنگ را اضافه کنید.


    $('.close-btn').click(function(){


    $('.close-btn,.popup-screen').click(function(){

    • امتیاز 2
×
×
  • اضافه کردن...