Question

我在使用放在灯箱上的表单时遇到问题。当我通过ajax提交表单时，整个灯箱关闭。我希望能够在不影响灯箱的情况下提交表格。我一直在处理这个问题，我似乎无法让它消失。这甚至可能吗？我也通过Stackoverflow浏览了这个主题，但没有真正回答我的问题。

我将为我正在使用的HTML，CSS和JavaScript提供一个JSFiddle：

HTML：

<div class="header">
    <div class="header-left-wrapper">Left</div>

    <form id="SearchField">
    <div class="header-input-wrapper">
      <div class="SearchWrapper">
        <input type="text" id="txtInput" name="input" placeholder="search dictionary" tabindex="1">
      </div>
    </div>
    <div class="header-right-wrapper">

      <input type="submit" value="Enter" id="btnEnter" name="enter" tabindex="2">

    </div>
    </form>

  </div>

CSS：

body { font-family: Helvetica, Arial; }

/********************************************
* MAIN LIGHTBOX STYLES
*********************************************/
.backdrop {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:#000;
  opacity: .0;
  filter:alpha(opacity=0);
  z-index:50;
  display:none;
}

.box {
  position:absolute;
  top: 50%;
  left: 50%;
  width:600px;
  height:400px;
  margin-top: -200px;
  margin-left: -300px;
  background:#fff;
  z-index:51;
  padding:10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow:0px 0px 5px #444444;
  -webkit-box-shadow:0px 0px 5px #444444;
  box-shadow:0px 0px 5px #444444;
  display:none;
}

.close {width:32px;height:32px;float:right;position:relative;top:-25px;left:25px;cursor:pointer;margin-bottom:-100px;}

/********************************************
* HEADER LIGHTBOX STYLES
*********************************************/
.header {display:block;width:590px;height:50px;background:#336699;margin:0 auto;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;overflow:hidden;}

.header-left-wrapper {float:left;width:150px;height:50px;}
.header-input-wrapper {float:left;width:300px;height:50px;}
.header-right-wrapper {float:right;width:140px;height:50px;position:relative;}

.SearchWrapper {background:#fff;width:300px;height:35px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;position:relative;top:7px;}

.SearchWrapper input {position:relative;top:4px;left:2px;width:294px;font-size:20px;border:none;}

btnEnter {font-size:16px;width:75px;height:37px;margin-top:5px;margin-bottom:7px;margin-left:6px;}

/********************************************
* LIGHTBOX CONTENT STYLES
*********************************************/
.contentWrap {display:block;width:588px;height:340px;background:#fff;margin:0 auto;border-left:1px solid #c0c0c0;border-right:1px solid #c0c0c0;border-bottom:1px solid #c0c0c0;-webkit-border-radius:0px 0px 4px 4px;-moz-border-radius:0px 0px 4px 4px;border-radius:0px 0px 4px 4px;-moz-box-shadow:0px 3px 4px #444444;-webkit-box-shadow:0px 3px 4px #444444;box-shadow:0px 3px 4px #444444;}

.contentWrap-leftcol {display:block;float:left;width:175px;height:100%;background:#fff;}
.contentWrap-middle {display:block;float:left;/*width = 238 - border*/width:236px;height:100%;background:#fff;border-left:1px solid #a6a6a6;border-right:1px solid #a6a6a6;}

/* STYLE PHP OUTPUT IN MIDDLE COLUMN */
.DictionaryContentWrapper {margin:0px;padding:0px;}
.bold {font-weight:bold;}
.word {font-size:16px;margin:0px;padding:0px;display:inline;}
.pronunciation {font-size: 12px;display:inline;}

.contentWrap-rightcol {display:block;float:right;width:175px;height:100%;background:#fff;}

JavaScript的：

$(document).ready(function() {

    $("#SearchField").submit(function() {

        // grabs all post variables in the form
        var info = $(this).searialize();


        $.post('dictionary.php', info, function(data) {

            $('.DictionaryContentWrapper').append(data);

        });

        // prevent server from refreshing page
        return false;

    });


});

我将在下面提供我正在使用的PHP：

<?php
/*
** DICTIONARY.PHP
*************************/
$input = $_POST['input'];
echo $input;

?>

我想指出的一件事是在css中，btnEnter意味着'#btnEnter'，但它采用了奇怪的格式，所以我没有添加'＃'。

灯箱上的AJAX表单无法正常工作

0 个答案: