0

当用户单击链接时，我试图打开一个 div。我使用了 leanModal来做到这一点。但是，我对这个 div 有疑问。

我希望用户单击我的按钮（或链接）并填写表格。在打开的 div 的底部，有两个按钮。确认（或提交）取消。这两个按钮都会关闭 div 并提交按钮提交表单，而取消按钮取消表单。

如何关闭 div 并检查用户是否单击了提交或取消？

非常感谢。

这是我从leanModal示例中复制/粘贴的大部分代码。我知道这没有显示任何内容，因为不包括leanModal。

基本上，我体内有一个锚点和一个 div。锚点在单击时显示 div。

这是代码片段：

<a id="go" rel="leanModal" name="test" href="#test">Basic</a>

<div id="test">
 <input type="button" value="das" />
</div>

编辑：这是我之后添加的部分： 

<script type="text/javascript">
    $(function() {
        $("a#go").leanModal({ closeButton: ".popButton" });
    });

    $('.popButton').click(function()
    {
        id = $(this).attr('id'));

        if(id == "send")
        {
            alert("send");
        }
    });

</script>
4

2 回答 2

1

您是否尝试过使用标准 jquery？

对于您的示例，简单如下：

$("#go").click(function(){
    $("#test").slideToggle(500); //500 being the time for it to animate into view
});

继承人的 api 文档jQuery slideToggle

这是工作示例:)

滑块示例

编辑：

对于您的要求，答案仍然很简单，jquery 具有执行几乎任何操作所需的大部分功能。

$("#go").click(function(){
    $("#test").slideDown(500); //500 being the time for it to animate into view
});
$(".fbutton").click(function(){
    $("#test").slideUp(500); //500 being the time for it to animate into view
});

继承人的 api 文档jQuery slideDown jQuery slideUp

例子：

SliderDown 和 SliderUp 示例

编辑2：

仍然很简单，只是一个 if 条件并将 id 添加到按钮 :)

$("#go").click(function(){
    $("#test").slideDown(500); //500 being the time for it to animate into view
});
$(".fbutton").click(function(){
    if($(this).attr('id') == "close")//attr is to get an attribute of a tag, here we get the id
    {
        alert("Close Clicked!");
    }
    else if($(this).attr('id') == "confirm")//attr is to get an attribute of a tag, here we get the id
    {
        alert("Confirm Clicked!");
    }
    $("#test").slideUp(500); //500 being the time for it to animate into view
});

我在此处放置了 if 条件，而不是单独添加单击功能，以保持浏览器兼容性，即某些浏览器在动画之前不会等待警报消失。

继承人的 api 文档jQuery attr

例子 ：

带有警报示例的 SlideDown 和 SlideUp

于 2013-05-10T01:49:45.470 回答
0

要div在单击取消或使用leaModal提交时关闭，请为这两个元素提供相同的类。比方说.button。

然后，在您的 leanModal 设置中，分配关闭按钮，如下所示：

$("a#go").leanModal({ closeButton: ".button" });

因为两个按钮都有.button类，所以当单击其中任何一个按钮时，对话框应该关闭。

检查取消或提交之间差异的一种方法是给他们每个人自己的 id. 然后你可以在 jQuery 点击监听器中捕获它：

$('.button').on('click', function(){ 
  id = $(this).attr('id'));
});

这是一个非常基本的问题方法，但我希望它有所帮助！

于 2013-05-10T01:50:17.773 回答