hi guys,
I followed a “jquery popup modal window” tutorial from here,
And here are the codes,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Popup jQuery modal window</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
.modalwindow {
position:fixed;
display:none; /* Hides the modal window by default */
z-index:9999;
width:500px;
background: #FF5722;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
h2 {
background-color: #E64A19;
padding: 15px;
font-size: 25px;
color: #000;
margin: 0;
font-family: arial;
text-align: center;
}
.content {
padding: 20px;
color: #fff;
font-size: 22px;
line-height: 30px;
}
.close {
float: right;
margin-top: -47px;
margin-right: 15px;
width: 17px;
height: 17px;
display: block;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
font-weight: bold;
font-family: arial;
}
</style>
</head>
<body>
<!-- #modal is the id of a DIV defined in the code below -->
<a href="#modal" name="modal">Simple Modal Window</a>
<!-- #customize your modal window here -->
<div id="modal" class="modalwindow">
<!-- Modal window Title -->
<h2>Simple jQuery Modal Window</h2>
<!-- close button is defined as close class -->
<a href="#" class="close">X</a>
<div class="content">
<!-- Modal Window Content -->
</div>
</div>
<script>
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
id.css('top', winH/2-id.height()/2);
id.css('left', winW/2-id.width()/2);
//transition effect
id.fadeIn(500);
});
//if close button is clicked
$('.modalwindow .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('.modalwindow').fadeOut(500);
});
</script>
</body>
</html>
The problem with these codes,
when you click the link the “Modal window” will not popup.
What might be the problem with this?
thanks in advance.