Implement greybox in web applications

Question

I am trying to have a greybox pop up in a web applications.

So I googled it and I found some codes and added it to the php page as shown below

<script type="text/javascript">
  var GB_ROOT_DIR = "../I/greybox/";
</script>

<script type="text/javascript" src="../I/greybox/AJS.js"></script>
<script type="text/javascript" src="../I/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="../I/greybox/gb_scripts.js"></script>
<link href="../I/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

<td align="center">
  <a href ="http://google.com/" title="Google" rel="gb_page_center[640, 480]">
      <i title="Edit" class="icon-modify-circle" style="cursor:pointer;" onClick=""></i>
  </a>
</td>

But when I click the link its opening in the new window. Any suggestions appreciated.

I have all the js and css files stored inside ../I/greybox which are mentioned above.

Answer 1

• 1st possible solution: onClick="function(e) {e.preventDefault();}"
• 2nd possible solution: Do it youself. Example

$('.openForm').click(function() {
    $('.popup').addClass('visible');
});
$('.closeForm').click(function() {
    $('.popup').removeClass('visible');
});
$('form').submit(function(ev) {
    ev.preventDefault();
    $('.popup').removeClass('visible');
    var email = $('.popup .form #email').val(),
        message = $('.popup .form #message').val(),
        text = 
        '<h3>Message</h3><b>from: </b>' + email + '<br><b>text: </b>' + message;
    $('#testresponse').html(text);
});

.openForm {
    color:blue;
    cursor:pointer;
}

.popup {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
}

.visible {
    display:block;
}

.popup .form {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    width:300px;
    height:200px;
    background:white;
    border:solid 1px #ddd;
}

.popup .closeForm {
    position:absolute;
    top:0;
    right:0;
    cursor:pointer;
    color:#ccc;
}

.popup .closeForm:hover {
    color:#000;
}

<div class="openForm">Click Me</div>
<div id="testresponse"></div>
<div class="popup">
    <div class="form">
        <div class="closeForm">X</div>
        <form action="" method="post">
            <input id="email" type="email" name="email" placeholder="Enter your E-Mail..." /><br />
            <textarea id="message"></textarea><br />
            <input type="submit" value="send" />
            
        </form>
    </div>
</div>