Question

我对javascript和jquery全新，所以请耐心等待。

当我单击“添加”按钮时，表格div应出现在页面的中间位置，焦点位于表格div上。页面的其余部分应该看起来已停用（我通过设置不透明度来做到这一点）但是发生的事情是包括表单div在内的所有页面都受到不透明度的影响。当表单div出现时，用户无法单击除表单div之外的任何内容。仅当用户单击“保存”或“取消”按钮时，页面才能返回到默认设置。

当您点击图片时，想法就像在Facebook中一样。

有人可以给我一个你能给出的最简单的例子。请帮忙。提前谢谢。

我建议你运行我的代码，这样你就可以看到我想要做的事情。

divformtest.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="jquery1.6.4min.js"></script>
<script type="text/javascript">
function loadDefault () {
 $("div#wrapper").css('opacity', '1.0');
 $("div#form").hide();
 $("div#formEdge").hide();
}

$(document).ready(function() {
 loadDefault();
});

$(function(){
 $("input#btnShowForm").click(function(){
  $("div#wrapper").css('opacity', '0.1');
  $("div#form").show();
  $("div#formEdge").show();
  $("div#formEdge").height($("div#form").height() + 20);
  $("div#formEdge").width($("div#form").width() + 20);
 });

 $("input#btnSave").click(function(){
  loadDefault();
 });

 $("input#btnCancel").click(function(){
  loadDefault();
 });
});
</script>    
</head>
<body>
<div id="wrapper">
<br />
<input type="button" id="btnShowForm" value="Add"  />
<br /> <br />
<div id="formEdge">
<div id="form">
 <table id="tblForm">
  <tr>
   <td>First Name:</td>
   <td><input type="text" /> </td>
  </tr>
  <tr>
   <td>Last Name:</td>
   <td><input type="text" />  </td>
  </tr>
  <tr>
   <td>Address: </td>
   <td><input type="text" />  </td>
  </tr>
  <tr>
   <td>Contact Number:</td>
   <td><input type="text" />  </td>
  </tr>
  <tr>
<td>Email:</td>
    <td><input type="text" />  </td>
  </tr>
  <tr>
   <td colspan="2">
    <table style="margin: 0 auto;">
     <tr>
      <td><input type="button" id="btnSave" value="Save"> </td>
      <td><input type="button" id="btnCancel" value="Cancel"> </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</div>
</div>
</div>
</body>
</html>

Answer 1

您需要使用的是Modal dialog。这将使您的表单在div中脱颖而出，同时使得底层页面无法访问，直到模式对话框被取消，或者您的表单完成。

Answer 2

您需要将jQuery UI添加到您的网页，并在模式模式下使用其dialog小部件。

这可以通过在CSS中使用z-Order将对话框放在前面，然后使用另一个透明的div来覆盖页面内容的其余部分：

您的要求的用法是某些，如：

var $div = $('#form');
$div.dialog({
   modal: true,
   buttons: {
       Save: function() {
           $(this).dialog("close");
       },
       Cancel: function() {
           $(this).dialog("close");
       }
   },
   close: function() {
       $(this).dialog('destroy'),
   }
});

这会自动创建按钮 - 无需自己将它们添加到div中。

如何使用jquery使html div看起来像一个单独的窗体或窗口？

2 个答案: