JS alert box

by olelasse

HTML

<html>
<head>
  <title>JS Alert Box</title>
</head>
<body>

<h2>
Table 1
</h2>
<h3>
Alert()
</h3>
<table border="1">
  <tr>
    <td>Manufacturer</td>
    <td>Product</td>
    <td>Price range 1</td>
    <td>Price range 2</td>
    <td>Price range 3</td>
  </tr>
  <tr>
    <td>Umbrella Company</td>
    <td>Vaccine</td>
    <td><div onclick="alert('1399')">1399</div></td>
    <td><div onclick="alert('4299')">4299</div></td>
    <td><div onclick="alert('5999')">5999</div></td>
  </tr>
  <tr>
    <td>Umbrella Company</td>
    <td>Vaccine 2</td>
    <td><div onclick="alert('1299')">1299</div></td>
    <td><div onclick="alert('4199')">4199</div></td>
    <td><div onclick="alert('5899')">5899</div></td>
  </tr>
  <tr>
    <td>Microhard</td>
    <td>PDA</td>
    <td><div onclick="alert('999')">999</div></td>
    <td><div onclick="alert('3599')">3599</div></td>
    <td><div onclick="alert('6299')">6299</div></td>
  </tr>
</table>

<h2>
Table 2
</h2>
<h3>
Custom JS
</h3>
<table border="1">
  <tr>
    <td>Manufacturer</td>
    <td>Product</td>
    <td>Price range 1</td>
    <td>Price range 2</td>
    <td>Price range 3</td>
  </tr>
  <tr>
    <td>Umbrella Company</td>
    <td>Vaccine</td>
    <td><div id="confirm"><div class="message">1399</div><button class="yes">Close</button></div><div onclick="functionAlert();">1399</div></td>
    <td><div id="confirm"><div class="message">4299</div><button class="yes">Close</button></div><div onclick="functionAlert();">4299</div></td>
    <td><div id="confirm"><div class="message">5999</div><button class="yes">Close</button></div><div onclick="functionAlert();">5999</div></td>
  </tr>
  <tr>
    <td>Umbrella Company</td>
    <td>Vaccine 2</td>
    <td><div id="confirm"><div class="message">1299</div><button class="yes">Close</button></div><div onclick="functionAlert();">1299</div></td>
    <td><div id="confirm"><div class="message">4199</div><button class="yes">Close</button></div><div onclick="functionAlert();">4199</div></td>
   ...

CSS

#confirm {
	display: none;
	background-color: #F3F5F6;
	color: #000000;
	border: 1px solid #aaa;
	position: fixed;
	width: 300px;
	height: 400px;
	left: 40%;
	top: 40%;
	box-sizing: border-box;
	text-align: center;
}
#confirm button {
	background-color: #FFFFFF;
	display: inline-block;
	border-radius: 12px;
	border: 4px solid #aaa;
	padding: 5px;
	text-align: center;
	width: 60px;
	cursor: pointer;
	bottom: 5px;
}
#confirm .message {
	padding: 5px;
	text-align: left;
}

JavaScript

function functionAlert(msg, myYes) {
   var confirmBox = $("#confirm");
   confirmBox.find(".message").text(msg);
   confirmBox.find(".yes").unbind().click(function() {
      confirmBox.hide();
   });
   confirmBox.find(".yes").click(myYes);
   confirmBox.show();
}