Loading:

Książka Zend Framework 3. Poradnik Programisty.

Modalne okno dialogowe - AJAX

Skrypt tworzy modalne okno dialogowe czyli takie które podczas swojej obecności blokuje wszystkie inne elementy witryny.



Napisz Artykuł

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()
{
}


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=2911

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors