JSFiddle - React, Tailwind, and code Playground

by briggs_w

HTML

<ul>
	<li><a href="mypage.html?eventID=1" class="1">Event 1</a></li>
	<li><a href="mypage.html?eventID=2" class="2">Event 2</a></li>
	<li><a href="mypage.html?eventID=3" class="3">Event 3</a></li>
</ul>
	<div id="modalMask">
        <div id="modalContent">
         	Loading...
        </div>
    </div>
	<script src="ajaxRequest.js" type="text/javascript"></script>
	<span id="output"></span>

CSS

#modalMask 
{
	display:none;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%;
	height:100%;
	z-index: 1000;
	-moz-opacity: 0.9;
}

#modalContent /* This is for the content of the modal window: white bkgd, black border, centered, etc.*/
{
	position: absolute;
	left: 150px;
	top: 300px;
	width:300px;
	padding:15px;
	background-color: #fff;
	border:1px solid #000;
	z-index: 9999;
}

JavaScript

// Function called to open the window:
function openModalPopupWindow() 
{
 document.getElementById('modalMask').style.display = 'inline-block';	// Make the modal popup stuff visible
 getOutput ();                                                          // ...fill it with appropriate info
} 

// Function called to close the window:
function closeModalPopupWindow() 
{
 document.getElementById('modalMask').style.display = 'none'; 			// Make the modal popup stuff invisible:
 document.getElementById('closeModal').onclick = null; 					// Make "close" button stop working 
} 

function addEvent (obj, type, fn) 	//This function will be buried in a .js file somewhere
					//and not edited -- you can just use it
{
	//Taken from p. 276, Ullman, Modern Javascript:  Development and Design
	if (obj && obj.addEventListener) obj.addEventListener (type, fn, false); //normal browsers
	else if (obj && obj.attachEvent) obj.attachEvent ('on'+type, fn);	 //IE
}

for (var j = 0; j < document.links.length; ++j) //for each link on the page
{
	var link = document.links[j];
    addEvent (link, 'mouseover',openModalPopupWindow);       
}		

//http://stackoverflow.com/questions/7165395/call-php-function-from-javascript

function getRequest() 
{
    var req = false;
    try{
        // most browsers
        req = new XMLHttpRequest();
    } catch (e){
        // IE
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            // try an older version
            try{
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                return false;
            }
        }
    }
    return req;
}

function getOutput() 
{
  if (typeof e == 'undefined') e = window.event //we always do this in event handler, to make IE work
  var target = e.target || e.srcElement; //Another IE hack, so we can get the element the event relates to
  var ID = target.className;
  
  document.getElementById('output').innerHTML = ID;...