Custom alert using Jquery Dialog

(JQUERY)


Hi,
In this article i am discuss about how to create custom alert using jquery dialog.

View:-

@{
    ViewBag.Title = "customAlert";
}

<h2>customAlert</h2>

<input type="button" id="btn_customalert" value="Open Custom Alert" />


<script type="text/javascript">

    $(function () {

        $('#btn_customalert').click(function () {

            customDialog('Information', 'Custom alert demo');
        });
    });

    //for jquery custom dialog box
    function customDialog(headerValue, message) {

        //remove the existing div
        var divs = $('body').find('div[id="div_customDialog"]');

        $.each(divs, function (index, divItem) {
            $(divItem).remove();
        });

        //add new div
        $('body').append('<div id="div_customDialog"></div>');

        $('#div_customDialog').html(message);

        $('#div_customDialog').dialog({
            draggable: true,
            modal: true,
            resizable: false,
            width: 'auto',
            title: headerValue,
            minHeight: 75,
            buttons: {
                OK: function () {
                    $(this).dialog('close');
                    $(this).dialog('destroy');
                }
            }
        });

        $('#div_customDialog').dialog('open');
    }
</script>


Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
7/17/2013
7/17/2013
Download PDF

Comments