在 Web 应用程序中实现灰盒

Question

我正在尝试在 Web 应用程序中弹出 greybox。

于是我google了一下，找到了一些代码并添加到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

• 第一种可能的解决方案：onClick="function(e) {e.preventDefault();}"
• 第二个可能的解决方案：自己做。 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>