Всплывающие окно

Discussion in 'PHP' started by jax33, 24 Aug 2011.

  1. jax33

    jax33 New Member

    Joined:
    8 Aug 2011
    Messages:
    35
    Likes Received:
    0
    Reputations:
    -1
    хай

    подскажите пример


    нужно на сайте организовать

    кнопочку при нажатие которой вылазиет окно ( не окно браузера ) допустим размером 700на700 и в этом окне содержимое html (вообщем информация)

    я просто не шарю в этом (но надо)

    может где примеры есть ?
     
  2. Gifts

    Gifts Green member

    Joined:
    25 Apr 2008
    Messages:
    2,494
    Likes Received:
    807
    Reputations:
    614
    jax33 http://tinyurl.com/4xe9ryc
     
    _________________________
  3. Melfis

    Melfis Elder - Старейшина

    Joined:
    25 Apr 2011
    Messages:
    505
    Likes Received:
    105
    Reputations:
    53
    Вот пример.
    HTML:
    <html>
    <head>
    <script>
    // кроссбраузерный навес ивентов
    Object.prototype.attachEvent = function(ev, hand) {
    	this.addEventListener(ev.indexOf("on") == 0 ? ev.replace("on","") : ev, hand, false);
    }
    
    // обработчик на загрузку страницы. Сначала подгружаются элементы 
    // на странице. Потом мы их берём через метод(к примеру getElementById)
    function setWindowOnLoad(func) {
    	if (typeof window.onload != 'function') {
    		window.onload = func;
    	} else {
    		window.onload = function() {
    			func();
    		}
    	}
    }
    
    var onLoad = function () {
    	// берём элемент по id
    	var menu = document.getElementById('menu'),
    		req = new request(),
    		outContainer = document.getElementById('out-container');
    
    	// добавляем ивент клика на элемент
    	menu.attachEvent('onclick', function () {
    		var requsetObject = {
    			url: '/script.php',
    			onsuccess: function(text){
    				outContainer.style.display = "block";
    				outContainer.innerHTML = text;
    			},
    			onerror: function(text){
    				outContainer.innerHTML = text;
    			},
    			params: {
    				id: 1,
    				str: "блабла"
    			}
    		};
    		req.sendRequest(requsetObject);
    	});
    }
    
    setWindowOnLoad(onLoad);
    
    //объявление "класса"
    var request = function (requestInfo) {
    	// объявление свойств. При создании экземпляра "класса" request можно сразу инициализировать параметры запроса
    	// передав объект с данными
    	this.requestInfo = requestInfo || {};
    	// указание своего таймаута, по умолчанию 10 секунд
    	!this.requestInfo.timeout && (this.requestInfo.timeout = 10000);
    
    	// объявление метода, который создаёт экземпляр "класса", 
    	// отвечающего за отправку и приём запросов и ответов соответственно.
    	// этот метод даже не надо запоминать, он всегда стандартный
    	this.getXmlHttp = function () {
    		var xmlhttp;
    		try {
    			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    		}
    		catch (e) {
    			try
    			{
    				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    			} 
    			catch (E) {
    				xmlhttp = false;
    			}
    		}
    		if (!xmlhttp && typeof XMLHttpRequest != 'undefined') 
    			xmlhttp = new XMLHttpRequest();
    
    		return xmlhttp;
    	};
    
    	// соединение 2х объектов в один
    	this.merge = function (obj1, obj2) {
    		for (var param in obj2) {
    			obj1[param] = obj2[param];
    		}
    		
    		return obj1;
    	};
    
    	// отправка запроса на сервер
    	this.sendRequest = function (requestInfo) {
    		// если параметры запроса не заданы, то вернуть false
    		if (!this.requestInfo && !requestInfo) {
    			return false;
    		}
    		
    		// если объект с параметрами запроса и другими не был задан ранее, то обяъявить его как
    		// пустой объект
    		if (!this.requestInfo) {
    			this.requestInfo = {};
    		}
    
    		// соединяем имеющиеся параметры с пришедшими в метод
    		this.requestInfo = this.merge(this.requestInfo, requestInfo);
    
    		var httpRequest = this.getXmlHttp(), // получение экземпляра "класса" аякс запроса
    			// передаём параметры с именами id, name или любых других, чтобы получить строку вида
    			// ?paramName1=someValue1&paramName2=someValue2
    			queryString = this.buildQuery(this.requestInfo.params), 
    			timeoutObj = null, // ссылка на таймер, задаётся позже
    			self = this;
    
    		// если не задан метод отправки запроса (POST, GET), то по умолчанию гет
    		if(!this.requestInfo.method)
    			this.requestInfo.method = 'GET';
    
    		// если существует метод(прелоудер=preloader), который будет обозначать, что действие выполняется, и изображать
    		// ход выполнения, то выполнить его.
    		this.requestInfo.beforeLoad && this.requestInfo.beforeLoad();
    
    		// задание параметров соединения
    		// если метод гет, то к урле добавляем параметры, полученные через метод buildQuery
    		httpRequest.open(
    			this.requestInfo.method, this.requestInfo.url
    			+ (
    				(!this.requestInfo.method || this.requestInfo.method == 'GET')
    					? queryString
    					: ''
    			)
    		, true);
    
    		// если метод пост, то нужно добавить заголовок с указанием типа передаваеммых данных
    		if(this.method && this.method == 'POST') {
    			httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    		}
    
    		// отправка данных на сервер
    		httpRequest.send(queryString);
    		
    		// обработчик на ответ от сервера
    		httpRequest.onreadystatechange = function() {
    			// если ответ не получен, то выйти из метода без дальнейших действий
    			if (httpRequest.readyState != 4)
    				return;
    			// ответ получен и поэтому сбросим таймер, который через timeout выбросит сообщение об ошибке
    			clearTimeout(timeoutObj);
    			// если статус ответа от сервера 200, значит ответ пришёл успешно. Даже если в скрипте на стороне сервера
    			// были ошибки - всё равно будет 200
    			if (httpRequest.status == 200)	
    				// если задан callback на успешное выполнение, то выполнить его с параметром в виде ответа от сервера
    				self.requestInfo.onsuccess && self.requestInfo.onsuccess(httpRequest.responseText);
    			else
    				// тоже самое, только если ошибка, в callback передаётся статус ошибки
    				self.requestInfo.onerror && self.requestInfo.onerror(httpRequest.statusText);
    		}
    
    		// если за timeout не пришёл ответ от сервера, то прервать выполнение запроса с вызовом метода ошибки, если он есть
    		timeoutObj = setTimeout( function(){
    			httpRequest.abort();
    			self.requestInfo.onerror && self.requestInfo.onerror("Timeout");
    		}, this.requestInfo.timeout);  // таймаут
    	};
    
    	this.buildQuery = function (params) {
    		var queryString = '?';
    
    		for (var paramName in params) {
    			queryString += paramName + '=' + params[paramName] + '&';
    		}
    		return queryString;
    	};
    }
     
    </script>
    </head>
    <body>
    <div id="menu">menu</div>
    <div id="out-container" style="display: none;"></div>
    </body>
    </html>
    
    requestObject можно передать при создании экземпляра объекта. Можно при посыле запроса. Можно указать свой timeout так же как и другие параметры. Есть ещё метод beforeLoad, он что-то выполняет с момента посыла запроса до момента приёма ответа.

    script.php
    PHP:
    <?
    echo 
    "<div>INFO</div>";
    ?>
     
  4. jax33

    jax33 New Member

    Joined:
    8 Aug 2011
    Messages:
    35
    Likes Received:
    0
    Reputations:
    -1
    блин что то не понимаю ,

    мне вот надо как на ucoz , такие окошки высплывали при нажатие на кнопку ну или ссылку

    не обязательно такие красивые , просто квадрат с html кодом (ссылками и картинками)
     
  5. jax33

    jax33 New Member

    Joined:
    8 Aug 2011
    Messages:
    35
    Likes Received:
    0
    Reputations:
    -1
    передумал делать это окно , хочу сделать так но не знаю как

    вот есть фейковый сайт zcat.pp.ru но это не важно , там при нажатие на ссылку РЕГИСТРАЦИЯ вылезает по верх страницы другая , с формой (оплаты) (но адрес остаётся тот же ) это наверное всё JS , но может кто подскажет на примерах как это всё сделать

    (то что на этом сайте , это подключает партнёрка) но я вот так же хочу но тока при нажатии на ссылку так же по верх открывался сайт или какой нибудь свой html код (ну типа страницы с какой нибудь инфой)



    знаю что пишу не понятно но может хоть кто нибудь поймёт
     
  6. jax33

    jax33 New Member

    Joined:
    8 Aug 2011
    Messages:
    35
    Likes Received:
    0
    Reputations:
    -1
    ау люди
     
  7. DVMade

    DVMade Banned

    Joined:
    23 Jul 2010
    Messages:
    110
    Likes Received:
    3
    Reputations:
    0
    Гугл не пробовал?) Полно всего...
    вот тебе ради примера
     
  8. barnaki

    barnaki Elder - Старейшина

    Joined:
    2 Nov 2008
    Messages:
    676
    Likes Received:
    130
    Reputations:
    4
    HTML:
    <html>
    <head>
    <script type="text/javascript" src="js/jquery.js"></script></head>
    <body>
    <a href="#" id="success">показать окно</a>
    <script type="text/javascript">
    $(function() {
    
            $("#success").bind("click", show_success_window);
            
        });
    	
    	function show_success_window () {
    	
    	var data  = "<div id="+"success_window"+" > данные успешно сохранены <br> <form><input type="+"button"+" id='hide_success' value='ok' > </form> </div>";
    	$("body").append(data);
    	$("#hide_success").bind("click",hide_success_window);
    	$("#success_window").css("border","1px solid black");
    	$("#success_window").css("width","200px");
    	$("#success_window").css("height","50px");
    	
    	}
    	function hide_success_window () {
    	$("#success_window").hide();
    	}
    
    </script>
    </body>
    <html>
    но так оно закроется только после первого нажатия. чтобы постоянно закрывалось вместо var data . в сам html впиши этот код. в css его display:none; а функциям $("success).show(); и $("success").hide(); и конечно /js/jquery.js/ должен быть
     
    #8 barnaki, 25 Aug 2011
    Last edited: 25 Aug 2011