CODEWITHSUNDEEP
jquerycolorbox
Steve
Steve

Reputation: 14912

Show div with jquery colorbox using a button

I have a jquery function that decides which message to show the user, one of 3. I have the three messages each in their own hidden div on my page.

When the user clicks a button on the page, the function is called and depending on the result, I wanted to show one of the 3 divs (#msg1, #msg2, or #msg3) in a pop up using colorbox.

However, the Colorbox docs show using a link with an HREF to determine the div to show; I want to use my function. So I tried this, but it pops us the colorbox but not with my div, it's empty:

 $(function() {
        $('#calcbtn').bind('click', function(){
            var score = 0;
            $('.rb:checked').each(function(){
                score+=parseInt($(this).val(),10);
            });
            // here i have logic to choose the div, assume #msg1 is the div
            $(this).colorbox({inline:true, href:"#msg1", width: "50%", height: "50%"});
        });
    });

Upvotes: 0

Views: 1276

Answers (1)

Steve
Steve

Reputation: 14912

I think I might have it:

 $(function() {
        $('#calcbtn').bind('click', function(){
            var score = 0;
            $('.rb:checked').each(function(){
                score+=parseInt($(this).val(),10);
            });
            //$("input[name=sum]").val(score)
            //alert('score is '+score);
            var $msg;
            if (score > 25) {
                $msg = $('#msg1');
            } else if (score < 15) {
                $msg = $('#msg3');
            } else {
                $msg = $('#msg2');
            }
            $.colorbox({inline:true, href:$msg, width: "50%", height: "50%"});
        });
    });

Upvotes: 1

Related Questions