Jquery 如何在通过ajax提交输入按钮时显示模式弹出窗口

当用户单击输入按钮时，它会将某些值传递给数据库。但是，在此之前，我需要通过ajax添加一个确认对话框

<input type="button" class="finished" value="Next &raquo;" id="Save" />
 <div id="save-modal" class="modal-dialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>Done!</h2>
      <p>You just updated your profile.<br />Here is your new information!</p>
    </div>
 </div>​

​ 而且应该使用$ajax（）完成

如果您单击

，该模式可以正常工作，但我不希望使用它

---

success:

此

ajax（）

函数的一部分，使其正确工作，我缺少了什么？

仔细查看，通过将不透明度设置为0隐藏模式，将其放入成功回调中：

  $("#save-modal").css("opacity",1);

编辑：

有关AJAX请求的更新示例，请参见此处

在CSS中，我添加了一个类：

.modal-dialog.show{
    opacity:1;
    pointer-events:auto;
}

---

然后，如果AJAX请求的数据类型是JSON，则为成功回调和关闭按钮添加和删除show类，这意味着成功方法的数据参数应该是对象而不是字符串。您需要在代码中解析对象，并从包含它的任何对象成员中提取HTML。或者，如果处理此ajax请求的PHP（或ASP）文件返回原始HTML，请更改您的数据类型：“HTML”

success : function(data)
{
    // Use Chrome or Firefox and you can view this in the debug console.
    console.log(data);

    // We will assume that data.content is the HTML to fill the modal with.
    $("#save-modal").html(data.content);
},

---

您是否正在使用用于模式的插件？如果是，只需告诉模态在成功回调中打开即可。查看插件文档，了解如何以编程方式打开模式。如果没有使用插件，$（'#save model'）.show（）？没有用于模式的插件，它基于CSS3。我将尝试

.show（）

。编辑：尝试了

show（）

，但没有成功。有趣的是，这确实有效，但它没有按照CSS中的说明转换。它只是突然出现在那里。我是否也必须将transition属性包含到

css（）

函数中？另一件奇怪的事情是，这会弄乱z索引，而如果我使用锚标记，它会按预期工作。在这里工作很好（无论如何在Firefox中），单击下一步按钮，它会淡入淡出，但我会让元素完全隐藏，而不仅仅是不透明度：0；另外，如果您使用的是jQuery之类的库，那么使用一个模式插件，它将为您完成所有困难的工作。对，这将正常工作，因为您没有使用

ajax（）

函数。然而，在该函数中，它的行为并不正常。我假设它在显示div之前必须先检查

ajax（）

函数的各种属性。即使如此，z索引也不能正常工作，因此它不是最重要的。好吧，我现在明白了为什么它不能正常工作。我需要div具有

：target

伪状态，我希望我能找到一种使用jQuery实现这一点的方法。哇，这很有效！转换仍然不起作用，但它是功能性的，所以这才是最重要的。：）非常感谢！我试过了，Chrome中的控制台只返回“OK”。但在视觉上什么也没有发生。我不能将数据类型更改为原始HTML，因为它调用了一个JSON函数来保存一些数据。这将破坏此输入的实际功能。我只是想在页面重新加载和提交之间添加一个步骤。

.modal-dialog.show{
    opacity:1;
    pointer-events:auto;
}

success : function(data)
{
    // Use Chrome or Firefox and you can view this in the debug console.
    console.log(data);

    // We will assume that data.content is the HTML to fill the modal with.
    $("#save-modal").html(data.content);
},