Question

我正在尝试在网络应用程序中弹出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>

在Web应用程序中实现greybox

1 个答案: