javascript pop up boxes

Question 1

I put together an overly simplistic jsFiddle demo of how a popup is made. Here is the magic:

//Display Popup method - you can modify this to add parameters 
function displayPopup(event) {
        //dynamically create a div, button, and inner text
        var p = document.createElement('div'),
            b = document.createElement('button'),
            t = document.createTextNode("Text and stuff");

    //add popup class to newly created div
    p.className += 'popup';
    //Add text to close button element
    b.innerHTML = "close";
    //Append text to popup div
    p.appendChild(t);
    //Bind click event to button element
    b.onclick = closePopup;
    //Append button to popup div, and append popup to document body
    p.appendChild(b);
    document.body.appendChild(p);

    p.style.display="block";

    //This function hides the popup
    function closePopup(event){
        p.style.display="none";
    }
}

It should by no means be considered complete or production material, but I hope it helps you get started on the right path to extending it to achieve the functionality you're looking for.

Question 2

It can be very easily done using pure CSS and JS...

Please find here the fiddle - Please let me know if this helps.

Your popup html code can be like-

<div id="click" onClick="showPopUp()">Click here to see the pop up</div>
<div id="popup">
    <div id="header">Welcome to Pop-Up
        <img src="http://icongal.com/gallery/image/158734/actions_window_close.png" width="20px" onclick="closeThis()" />
    </div>
    <div>THIS IS THE TEXT OF POP-UP</div>
</div>

Basic CSS -

#popup {
    position:absolute;
    display: none;
    left:50%;
    top:10px;
}

JS Code -

1) To Show the popup on click of the text

    function showPopUp() {
        document.getElementById("popup").style.display = "block";
    }

2) To check/hide a pop up when clicked anywhere else on the page -

    document.onclick=check;
    function check(e) {
            var target = (e && e.target) || (event && event.srcElement);
            var obj = document.getElementById('click');
            if(target!=obj){document.getElementById('popup').style.display='none'}
    }

Question 3

If you are just looking to do a pop box, use window.open:

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open3 


<html>
<body>

<p>Click the button to open an a new window called "MsgWindow" with some text.</p>

<button onclick="openWin()">Open "MsgWindow"</button>

<script>
function openWin()
{
var myWindow = window.open("","MsgWindow","width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
}
</script>

</body>
</html>

Question 4

Here's another approach: za.htm:

<!DOCTYPE html>
<html>
<head>
<script>
function dopopup() {
  var popup1 = window.open("zb.htm", "", "width=400, height=300");
  popup1.focus();
  }
</script>
</head>
<body>
<button onclick="dopopup()">Make Popup</button>
</body>
</html>

zb.htm:

<!DOCTYPE html>
<html>
<head>
<script>
function fnonblur() {
  window.close();
  }
</script>
</head>
<body onblur="fnonblur();">
Hello, world.
<button onclick="alert('Hello, again.');")>Click me</button>
</body>
</html>