Php 单击链接将在灯箱中打开一个新的div元素，其中包含表单

我有一个想法，我不知道如何开始，但我想实现：当我单击一个链接时，我想在lightbox中打开一个div元素，该元素具有HTML表单，用于将数据插入数据库。现在我知道了如何制作表单和字段。表单完成后，当use单击submit按钮时，我希望现有的div元素消失，并在lightbox中打开一个新的div，告诉用户：数据已成功添加到数据库中。几分钟后关上灯箱

我应该如何开始这样做？我有一个链接和灯箱进口和知道如何使用灯箱。 谢谢你的帮助。干杯

如果你需要更多信息，告诉我，我会编辑这篇文章

好吧，我一整天都在忙这个，并设法让它发挥作用

jQuery代码：

    <script>
$(document).ready(function() {
$('a.data-window').click(function() {

            //Getting the variable's value from a link 
    var loginBox = $(this).attr('href');

    //Fade in the Popup
    $(loginBox).fadeIn(300);

    //Set the center alignment padding + border see css style
    var popMargTop = ($(loginBox).height() + 24) / 2; 
    var popMargLeft = ($(loginBox).width() + 24) / 2; 

    $(loginBox).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() { 
  $('#mask , .data-popup').fadeOut(300 , function() {
    $('#mask').remove();  
}); 
return false;
});
});
</script>

<div id="data-box" class="data-popup">

<h3>Ispunite formu za unošenje proizvoda</h3>

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>" method="post" enctype="multipart/form-data">
<table width="0" border="0" cellspacing="0" cellpadding="2">
  <tr>
    <td>Kategorija:</td>
    <td><select class="select" name="kategorija">
    <option class="option" selected>Odaberite...</option>
    <option class="option" value="Laptop">Laptop</option>
    <option class="option" value="PC">PC</option>
    <option class="option" value="Tablet">Tablet</option>
    <option class="option" value="Periferije">Periferije</option>
    <option class="option" value="Dijelovi">Dijelovi</option>
    <option class="option" value="Audio">Audio</option>
    <option class="option" value="Mobitel">Mobitel</option>
    <option class="option" value="Monitor">Monitor</option>
    <option class="option" value="Televizor">Televizor</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Proizvod:</td>
    <td><select class="select" name="proizvod">
    <option class="option" selected>Odaberite...</option>
    <option class="option" value="Prijenosno Računalo">Prijenosno Računalo</option>
    <option class="option" value="Stolno Računalo">Stolno Računalo</option>
    <option class="option" value="Džepno Računalo">Džepno Računalo</option>
    <option class="option" value="Računalni Dodaci">Računalni Dodaci</option>
    <option class="option" value="Komponente">Komponente</option>
    <option class="option" value="Zvučna Oprema">Zvučna Oprema</option>
    <option class="option" value="Mobilni Uređaji">Mobilni Uređaji</option>
    <option class="option" value="Monitor">Monitor</option>
    <option class="option" value="Televizor">Televizor</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Proizvođač:</td>
    <td><select class="select" name="proizvodac">
    <option class="option" selected>Odaberite...</option>
    <option class="option" value="Acer">Acer</option>
    <option class="option" value="Asus">Asus</option>
    <option class="option" value="Apple">Apple</option>
    <option class="option" value="Dell">Dell</option>
    <option class="option" value="HP">HP</option>
    <option class="option" value="Lenovo">Lenovo</option>
    <option class="option" value="Alienware">Alienware</option>
    <option class="option" value="Sony">Sony</option>
    <option class="option" value="Compaq">Compaq</option>
    <option class="option" value="IBM">IBM</option>
    <option class="option" value="Gateway">Gateway</option>
    <option class="option" value="CyberPower">CyberPower</option>
    <option class="option" value="Alcatel">Alcatel</option>
    <option class="option" value="Amazon">Amazon</option>
    <option class="option" value="Archos">Archos</option>
    <option class="option" value="DataWind">DataWind</option>
    <option class="option" value="FlipKart">FlipKart</option>
    <option class="option" value="Huawei">Huawei</option>
    <option class="option" value="iBall">iBall</option>
    <option class="option" value="Karbonn">Karbonn</option>
    <option class="option" value="Lava">Lava</option>
    <option class="option" value="LG">LG</option>
    <option class="option" value="Micromax">Micromax</option>
    <option class="option" value="Microsoft">Microsoft</option>
    <option class="option" value="Milagrow">Milagrow</option>
    <option class="option" value="Panasonic">Panasonic</option>
    <option class="option" value="Swipe">Swipe</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Model:</td>
    <td><input class="input" type="text" name="model" placeholder="Model"/></td>
  </tr>
  <tr>
    <td>Slika:</td>
    <td><input type="file" name="slika"></td>
  </tr>
  <tr>
    <td>Naziv:</td>
    <td><input class="input" type="text" name="naziv" placeholder="Naziv"/></td>
  </tr>
  <tr>
    <td>Opis:</td>
    <td><textarea class="textarea" name="opis"></textarea></td>
  </tr>
  <tr>
    <td>Cijena:</td>
    <td><input class="input" type="text" name="cijena" placeholder="Cijena"/></td>
  </tr>
  <tr>
  </tr>
</table>

<input class="button" type="submit" name="submit" />
<input class="button" type="reset" value="Reset"/>
</form>

</div>

$（文档）.ready（函数（）{
$（'a.data-window'）。单击（函数（）{
//从链接获取变量的值
var loginBox=$（this.attr（'href'）；
//在弹出窗口中淡入淡出
$（登录框）.fadeIn（300）；
//设置中心对齐填充+边框请参见css样式
var popMargTop=（$（loginBox）.height（）+24）/2；
var popMargLeft=（$（loginBox）.width（）+24）/2；
$（登录框）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//将遮罩添加到主体
$（'body'）。追加（''）；
$（'面具'）.fadeIn（300）；
返回false；
});
//单击“关闭”按钮或遮罩层时，弹出窗口关闭
$（'a.close，#mask'）.live（'click'，function（）{
$（“#掩码，.数据弹出窗口”）.fadeOut（300，函数（）{
$（“#掩码”）.remove（）；
}); 
返回false；
});
});

我制作的表单：

    <script>
$(document).ready(function() {
$('a.data-window').click(function() {

            //Getting the variable's value from a link 
    var loginBox = $(this).attr('href');

    //Fade in the Popup
    $(loginBox).fadeIn(300);

    //Set the center alignment padding + border see css style
    var popMargTop = ($(loginBox).height() + 24) / 2; 
    var popMargLeft = ($(loginBox).width() + 24) / 2; 

    $(loginBox).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() { 
  $('#mask , .data-popup').fadeOut(300 , function() {
    $('#mask').remove();  
}); 
return false;
});
});
</script>

<div id="data-box" class="data-popup">

<h3>Ispunite formu za unošenje proizvoda</h3>

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>" method="post" enctype="multipart/form-data">
<table width="0" border="0" cellspacing="0" cellpadding="2">
  <tr>
    <td>Kategorija:</td>
    <td><select class="select" name="kategorija">
    <option class="option" selected>Odaberite...</option>
    <option class="option" value="Laptop">Laptop</option>
    <option class="option" value="PC">PC</option>
    <option class="option" value="Tablet">Tablet</option>
    <option class="option" value="Periferije">Periferije</option>
    <option class="option" value="Dijelovi">Dijelovi</option>
    <option class="option" value="Audio">Audio</option>
    <option class="option" value="Mobitel">Mobitel</option>
    <option class="option" value="Monitor">Monitor</option>
    <option class="option" value="Televizor">Televizor</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Proizvod:</td>
    <td><select class="select" name="proizvod">
    <option class="option" selected>Odaberite...</option>
    <option class="option" value="Prijenosno Računalo">Prijenosno Računalo</option>
    <option class="option" value="Stolno Računalo">Stolno Računalo</option>
    <option class="option" value="Džepno Računalo">Džepno Računalo</option>
    <option class="option" value="Računalni Dodaci">Računalni Dodaci</option>
    <option class="option" value="Komponente">Komponente</option>
    <option class="option" value="Zvučna Oprema">Zvučna Oprema</option>
    <option class="option" value="Mobilni Uređaji">Mobilni Uređaji</option>
    <option class="option" value="Monitor">Monitor</option>
    <option class="option" value="Televizor">Televizor</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Proizvođač:</td>
    <td><select class="select" name="proizvodac">
    <option class="option" selected>Odaberite...</option>
    <option class="option" value="Acer">Acer</option>
    <option class="option" value="Asus">Asus</option>
    <option class="option" value="Apple">Apple</option>
    <option class="option" value="Dell">Dell</option>
    <option class="option" value="HP">HP</option>
    <option class="option" value="Lenovo">Lenovo</option>
    <option class="option" value="Alienware">Alienware</option>
    <option class="option" value="Sony">Sony</option>
    <option class="option" value="Compaq">Compaq</option>
    <option class="option" value="IBM">IBM</option>
    <option class="option" value="Gateway">Gateway</option>
    <option class="option" value="CyberPower">CyberPower</option>
    <option class="option" value="Alcatel">Alcatel</option>
    <option class="option" value="Amazon">Amazon</option>
    <option class="option" value="Archos">Archos</option>
    <option class="option" value="DataWind">DataWind</option>
    <option class="option" value="FlipKart">FlipKart</option>
    <option class="option" value="Huawei">Huawei</option>
    <option class="option" value="iBall">iBall</option>
    <option class="option" value="Karbonn">Karbonn</option>
    <option class="option" value="Lava">Lava</option>
    <option class="option" value="LG">LG</option>
    <option class="option" value="Micromax">Micromax</option>
    <option class="option" value="Microsoft">Microsoft</option>
    <option class="option" value="Milagrow">Milagrow</option>
    <option class="option" value="Panasonic">Panasonic</option>
    <option class="option" value="Swipe">Swipe</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Model:</td>
    <td><input class="input" type="text" name="model" placeholder="Model"/></td>
  </tr>
  <tr>
    <td>Slika:</td>
    <td><input type="file" name="slika"></td>
  </tr>
  <tr>
    <td>Naziv:</td>
    <td><input class="input" type="text" name="naziv" placeholder="Naziv"/></td>
  </tr>
  <tr>
    <td>Opis:</td>
    <td><textarea class="textarea" name="opis"></textarea></td>
  </tr>
  <tr>
    <td>Cijena:</td>
    <td><input class="input" type="text" name="cijena" placeholder="Cijena"/></td>
  </tr>
  <tr>
  </tr>
</table>

<input class="button" type="submit" name="submit" />
<input class="button" type="reset" value="Reset"/>
</form>

</div>

我为扎乌诺什恩杰项目服务
还请提供一个（非）工作示例，以便您的问题更具体。我建议您参考Lightbox API，或者使用JQuery来实现您想要的。如果你不知道如何使用它们中的任何一个，刷新你的javascript知识。我找到了一些教程，我希望我能够理解它。如果没有，我会发回这里。