jQueryを使わずにポップアップウィンドウを作ってみました。

Result

main.js

window.onload = function() {

var box = document.getElementById("box");
var btn = document.getElementById("btn");
var close = document.getElementById("close");
var boxstyle = box.style;

btn.onclick = function(){
  if( boxstyle.display === "block" ) {
    boxstyle.display = "none";
  } else {
    boxstyle.display = "block";
  }
};

close.onclick = function(){
  boxstyle.display = "none";
};

}

index.html

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>PopUp</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="main.js"></script>
  </head>
  <body>
    <input type="button" id="btn" value="押す">
    <div id="box">
      <p id="close">×</p>
      <h2>Box</h2>
    </div>
  </body>
</html>

style.css

@charset "UTF-8";

#box {
  background: #FFF;
  border: 1px solid #333;
  box-shadow: 0 10px 10px #999;
  display: none;
  font-family: serif;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 200px;
}

#box > #close {
  background-color: #EEE;
  color: #333;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  margin: 0;
  position: absolute;
  right: 1px;
  text-align: center;
  top: 1px;
  width: 30px;
}

#box > #close:hover {
  background-color: #F9F9F9;
  color: #999;
}

#btn {
  background-color: #6C6;
  border: 0;
  color: #FFF;
  cursor: pointer;
  padding: 5px 20px;
}

#btn:hover {
  background-color: #9D9;
}

#btn:active {
  background-color: #4A4;
}

ポップアップウインドウ

Result

main.js

index.html

style.css