Реализация greybox в веб-приложениях

Question

Я пытаюсь иметь greybox всплывать в веб-приложениях.

Так что я погуглил его, нашел несколько кодов и добавил его на страницу php, как показано ниже

<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>

Но когда я нажимаю на ссылку, она открывается в новом окне. Любые предложения приветствуются.

У меня есть все файлы JS и CSS хранятся внутри ../I/greybox которые упомянуты выше.

Answer 1

• 1-е возможное решение: onClick = "function (e) {e.preventDefault ();}"
• 2-е возможное решение: сделай сам. пример

$('.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>