- HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End D...Cena: 57.85 zł
- Bootstrap 4 dla zaawansowanych. Jak pisać znakomite aplikacje interne...Cena: 31.85 zł
- HTML,CSS i JavaScript dla każdego. Wydanie VIICena: 64.35 zł
- Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron...Cena: 34.30 zł
Modalne okno dialogowe - AJAX
Skrypt tworzy modalne okno dialogowe czyli takie które podczas swojej obecności blokuje wszystkie inne elementy witryny.
Listing
//index.html #############################################
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax</title>
<link href="ajaxcss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ajaxcore.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="mainDiv" class="mainDiv">
<div style="width:50%;margin:0 auto;text-align:center;">
<input type="button" value="Pierwsza treść" class="myButton" id="btn1"
onclick="showDialog(1);" style="margin-top:10px;" />
</div>
<div style="width:50%;margin:0 auto;text-align:center;">
<input type="button" value="Druga treść" class="myButton" id="btn2"
onclick="showDialog(2);" style="margin-top:10px;" />
</div>
<div style="width:50%;margin:0 auto;text-align:center;">
<input type="button" value="Trzecia treść" class="myButton" id="btn3"
onclick="showDialog(3);" style="margin-top:10px;" />
</div>
</div>
</body>
</html>
//dialog3.html #############################################
<p style="text-align:center;">To jest bardzo ważna informacja nr 3.</p>
<p style="cursor:pointer;text-align:center;" onclick="closeDialog();">
Kliknij tu by zamknąć to okno.
</p>
//dialog2.html #############################################
<p style="text-align:center;">To jest bardzo ważna informacja nr 2.</p>
<p style="cursor:pointer;text-align:center;" onclick="closeDialog();">
Kliknij tu by zamknąć to okno.
</p>
//dialog1.html #############################################
<p style="text-align:center;">To jest bardzo ważna informacja nr 1.</p>
<p style="cursor:pointer;text-align:center;" onclick="closeDialog();">
Kliknij tu by zamknąć to okno.
</p>
//ajaxcss.css #############################################
.mainDiv
{
color: #333333;
position: relative;
background-color: #EFEFEF;
border: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 14px 14px 14px 14px;
width: 350px;
visibility: visible;
}
.dataDiv
{
color: #333333;
position: relative;
background-color: #ffffff;
border: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 14px 14px 14px 14px;
width: 420px;
visibility: visible;
}
.myButton
{
font-family:helvetica,sans-serif;
font-size:84%;
font-weight:bold;
border:1px solid;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
width:120px;
margin:5px;
}
.myTextInput
{
border:1px solid;
background-color: #F8F8F8;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
width:70%;
}
//ajaxcore.js #############################################
function getXMLHttpRequestObject()
{
try{
return new XMLHttpRequest();
}
catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
return false;
}
}
}
function startGETRequest(url, onComplete, onEnd)
{
var XMLHttpRequestObject = getXMLHttpRequestObject();
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var responseXML = XMLHttpRequestObject.responseXML;
var responseText = XMLHttpRequestObject.responseText;
onComplete(responseText, responseXML);
}
delete XMLHttpRequestObject;
onEnd();
}
}
XMLHttpRequestObject.send(null);
}
}
function startPOSTRequest(url, params, onComplete, onEnd)
{
var XMLHttpRequestObject = getXMLHttpRequestObject();
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("POST", url);
XMLHttpRequestObject.setRequestHeader(
'Content-Type', 'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var responseXML = XMLHttpRequestObject.responseXML;
var responseText = XMLHttpRequestObject.responseText;
onComplete(responseText, responseXML);
}
delete XMLHttpRequestObject;
onEnd();
}
}
XMLHttpRequestObject.send(params);
}
}
//ajax.js #############################################
var dialogDiv = null;
var transparentDiv = null;
var dialogWidth = 300;
var dialogHeight = 200;
function createDialog()
{
dialogDiv = document.createElement("div");
dialogDiv.style.display = "none";
dialogDiv.style.width = dialogWidth + "px";
dialogDiv.style.height = dialogHeight + "px";
dialogDiv.className = "dialogDiv";
dialogDiv.id = "dialogDiv";
transparentDiv = document.createElement("div");
transparentDiv.style.display = "none";
transparentDiv.className = "transparentDiv";
transparentDiv.id = "transparentDiv";
docWidth = parseInt(document.documentElement.clientWidth);
docHeight = parseInt(document.documentElement.clientHeight);
transparentDiv.style.width = docWidth + "px";
transparentDiv.style.height = docHeight + "px";
left1 = Math.floor((docWidth - dialogWidth) / 2);
top1 = Math.floor((docHeight - dialogHeight) / 2);
dialogDiv.style.top = top1 + "px";
dialogDiv.style.left = left1 + "px";
document.body.appendChild(dialogDiv)
document.body.appendChild(transparentDiv);
}
function showDialog(id)
{
if(id < 1 || id > 3) return;
if(!dialogDiv) createDialog();
url = "dialog" + id + ".html";
startGETRequest(url, onComplete, onEnd);
dialogDiv.style.display = "block";
transparentDiv.style.display = "block";
}
function closeDialog()
{
if(!dialogDiv) return;
dialogDiv.style.display = "none";
transparentDiv.style.display = "none";
}
function onComplete(text, xml)
{
dialogDiv.innerHTML = text;
}
function onEnd()
{
}
Dodano przez: igor
Ranga: Administrator serwisu Punktów: 0
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
:: Losowe artykuły
:: Wymiana linków
Modowe inspiracje |
Android Gry i Aplikacje |
ZaplanujTransport.pl: Przeprowadzki, transport, aukcje |
Logo dla firmy |
Change Tires - Car Weather Forecast Reminder |
Laminas: MVC Framework for PHP |
IT Books Reviews and Programming: JS, JAVA, PHP, ANDROID, CSS |
Katalog roślin |
Programming articles: JAVA, PHP, C++, Python, JavaScript |
Kancelaria Adwokacka Łukasz Huszno