Question

我正在尝试在用户点击链接时打开div。我是使用leanModal完成的。但是，我对这个div有疑问。

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

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

非常感谢你。

Here's我主要通过leanModal示例复制/粘贴代码。我知道这没有显示任何内容，因为不包括leanModal。

基本上，我身上有一个锚和一个div。 Anchor在点击时显示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>

Answer 1

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

您的样本简单如下：

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

继承人api文件jQuery slideToggle

继承人工作的例子：）

Slider Example

编辑：

对于您的请求，答案仍然非常简单，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 And SliderUp Example

编辑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 And SlideUp With Alert Example

Answer 2

要在点击取消或使用leanModal 提交时关闭div，请将这两个元素设为同一个类。我们说.button。

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

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

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

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

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

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

用按钮关闭Div

2 个答案: