Question

I need to give an alert when user clicks appropriate buttons.

This is my plugin:

    (function($){

    // Defining our jQuery plugin

    $.fn.Message= function(prop){

        // Default parameters

        var options = $.extend({
            height : "250",
            width : "500",
            autoclose:false,
            type: "Success",
            success: function (result) { },
            title:"JQuery Modal Box Demo",
            description: "Example of how to create a modal box.",
            top: "20%",
            left: "35%",
            imagePath: 'images/success.png',
        },prop);


        return this.click(function(e){
            add_block_page();
            add_popup_box();

           setTimeout(function() {
          $('.JMesg').animate({top:'toggle'},80);
            },300);

               if(options.autoclose==true)
                {
                 setTimeout(function() { 
                 $('.close').trigger('click');
                },4000); 
                }

         });


         function add_block_page(){
            var block_page = $('<div class="page"></div>');
            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="Message"><a href="#" class="close"></a><div class="header"><h3>' + options.title + '</h3></div><div class="mainbody"><table><tr><td><img src='+ options.imagePath +' class="mesgicon"/></td><td><p class="bodytext">' + options.description + '</p></td></tr></table></div><div class="footer"><a href="#" class="btn-close"><span>close</span></a></div></div>');
             $(pop_up).appendTo('.page');

              if(options.type=="Success"){
              var buttons =$('<a href="#" class="btn-Ok"><span>OK</span></a>');
               $(buttons).appendTo('.footer');
             }

              if(options.buttons=="Error"){
              var buttons =$('<a href="#" class="btn-Ok"><span>OK</span></a>');
               $(buttons).appendTo('.footer');
             }

             if(options.buttons=="Info"){
              var buttons =$('<a href="#" class="btn-Ok"><span>OK</span></a>');
               $(buttons).appendTo('.footer');
             }

              if(options.buttons=="Confirm"){
              var buttons =$('<a href="#" class="btn-Yes"><span>Yes</span></a><a href="#" class="btn-No"><span>No</span></a><a href="#" class="btn-Cancel"><span>Cancel</span></a>');
               $(buttons).insertBefore('.footer');
             }

              if(options.type=="Alert"){
              var buttons =$('<a href="#" class="btn-Ok"><span>OK</span></a>');
               $(buttons).appendTo('.footer');
             }

            $('.close').click(function(){
                 $(this).parent().animate({top:'toggle'},80);
                 setTimeout(function() {        
                  $('.page').fadeOut().remove();    
                },400);   
             });


              $('.btn-close').click(function(){
                 $(this).parent().parent().animate({top:'toggle'},80);
                 setTimeout(function() {        
                  $('.page').fadeOut().remove();    
                },400);      
             });

              $('.btn-Ok').click(function (e){
              e.preventDefault();
                 var value = $(this).val();
                 options.success(value);
                 $(this).parent().parent().animate({top:'toggle'},80);
                 setTimeout(function() {        
                  $('.page').fadeOut().remove();    
                },400);      
             });
        }
        return this;
     };
})(jQuery);

This is how I call:

<script type="text/javascript">
        $(document).ready(function () {
            $('.SuccessMessage').Message({
                type:"Success",
                autoclose: false,
                imagePath: 'images/success.png',
                title: 'Hoorah!',
                description: 'Success!.',
                success: function (result) {
                    if (result == "OK") {
                        alert("One cup of coffee coming right up!");
                    }
                }
            });
  </script>

Answer 1

The value of .btn-Ok, which you are passing to your success callback, is an empty string. Try changing your click handler to pass the anchor tag’s text() instead:

$('.btn-Ok').click(function (e){
    e.preventDefault();
    var value = $(this).text(); // pass text instead of value
    options.success(value);
    $(this).parent().parent().animate({top:'toggle'},80);
    setTimeout(function() {        
        $('.page').fadeOut().remove();    
    },400);      
});

Or hardcode the value passed to the success callback:

options.success("OK");