citizen_of_noobville
citizen_of_noobville

Reputation: 327

Closing Div With Button

I'm trying to open a div when user clicks to a link. I did this using leanModal. However, I have a question about this div.

I want user to click my button (or link), and fill a form. At the bottom of the opened div, there are two buttons. Confirm (or Submit) an Cancel. And both of these buttons will close the div and submit button submits the form, while cancel button cancels the form.

How can I close the div and check whether user clicked submit or cancel?

Thank you very much.

Here's my mostly copy/paste code from leanModal example. I know this doesn't show anything, because leanModal is not included.

Basically, I have an anchor and a div in the body. Anchor shows the div when it's clicked.

Here's the code piece for that:

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

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

EDIT: This is the part I added after:

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

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

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

</script>

Upvotes: 0

Views: 1176

Answers (2)

Marty Cortez
Marty Cortez

Reputation: 2343

To close the div when clicking either cancel or submit using leanModal, give both of those elements the same class. Let's say .button.

Then, in your leanModal set-up, assign the close button like this:

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

Because both buttons have the .button class, the dialog should close when either of them is clicked.

One way to check the difference between the cancel or submit is to give each of them their own id. Then you coud capture that in a jQuery click listener:

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

This is a very basic approach to the question, but I hope it helps!

Upvotes: 0

Eventor
Eventor

Reputation: 46

Have you tried using standard jquery?

for your sample simple as:

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

Heres the api documentation jQuery slideToggle

Heres the working Example :)

Slider Example

EDIT:

For your request the answer is still quite simple, jquery has most of the functionality needed to do almost anything.

$("#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
});

Heres the api documentation jQuery slideDown jQuery slideUp

Example:

SliderDown And SliderUp Example

EDIT 2:

Still quite simple, just an if condition and adding id's to the buttons :)

$("#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
});

I have put if conditions here instead of adding click functions individually, to maintain browser compatibility i.e. some browsers dont wait for the alert to go away before animating.

Heres the api documentation jQuery attr

Example :

SlideDown And SlideUp With Alert Example

Upvotes: 1

Related Questions