За последние 24 часа нас посетили 22927 программистов и 1227 роботов. Сейчас ищут 662 программиста ...

Floating Dialog Window

Тема в разделе "JavaScript и AJAX", создана пользователем allowance, 1 авг 2010.

  1. allowance

    allowance Активный пользователь

    С нами с:
    19 янв 2010
    Сообщения:
    196
    Симпатии:
    0
    Не подскажете как сделать своё окошко как здесь http://jetlogs.org/jquery/floating_dialog.php (при нажатии на Edit Preferences) только со скроллингом и с затемнением заднего фона страницы. Может кто видел такой плагин.
     
  2. Михаил

    Михаил Активный пользователь

    С нами с:
    12 июл 2009
    Сообщения:
    545
    Симпатии:
    0
    Адрес:
    Bielarus
    Наверное
    jQuery UI > dialog
     
  3. allowance

    allowance Активный пользователь

    С нами с:
    19 янв 2010
    Сообщения:
    196
    Симпатии:
    0
    Нашёл то что надо - http://www.profissionaisti.com.br/jquery/dialog/ - demo1

    Назрел такой вопрос, можно ли сделать плавность затемнения при нажатии как здесь - http://yensdesign.com/tutorials/popupjquery/

    Может нужно всего лишь подставит в этот код типа speed:2000 ?

    $('<div id="demo1">').load('pag1.html').dialog({
    maximize: false, // not maximizable
    modal:true,
    overlay:{background:'#000000', opacity:0.4}
    });
     
  4. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.410
    Симпатии:
    1.768
    allowance
    не проще ли посмотреть как ТАМ УЖЕ СДЕЛАНО? =) написано же что jquery. У нее синтаксис простейший. Берите Firefox, устанавливайте плагин Firebug, и ковыряйте чужой готовый код.

    в последнем случае из двух скриптов стоит смотреть именно второй, потому как первый - это сама библиотека жукувери.
    [js]/***************************/
    //@Author: Adrian "yEnS" Mato Gondelle
    //@website: www.yensdesign.com
    //@email: yensamg@gmail.com
    //@license: Feel free to use it, but keep this credits please!
    /***************************/

    //SETTING UP OUR POPUP
    //0 means disabled; 1 means enabled;
    var popupStatus = 0;

    //loading popup with jQuery magic!
    function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
    $("#backgroundPopup").css({
    "opacity": "0.7"
    });
    $("#backgroundPopup").fadeIn("slow");
    $("#popupContact").fadeIn("slow");
    popupStatus = 1;
    }
    }

    //disabling popup with jQuery magic!
    function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
    $("#backgroundPopup").fadeOut("slow");
    $("#popupContact").fadeOut("slow");
    popupStatus = 0;
    }
    }

    //centering popup
    function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
    "position": "absolute",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
    "height": windowHeight
    });

    }


    //CONTROLLING EVENTS IN jQuery
    $(document).ready(function(){

    //LOADING POPUP
    //Click the button event!
    $("#button").click(function(){
    //centering with css
    centerPopup();
    //load popup
    loadPopup();
    });

    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
    disablePopup();
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
    disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
    disablePopup();
    }
    });

    });[/js]
     
  5. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.410
    Симпатии:
    1.768
    после всего этого дела не грех зайти на jquery и там уже почитать и посмотреть демки. они там весьма подробные.