Open dialog instead of alert/prompt in jquery

Question

I am using fullcalendar. I would like to show a dialog when I click on an event. But I only know how to pop up an alert or prompt. How do I popup a dialog with JavaScript?

My jQuery code is as follow:

$(document).ready(function () {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        editable: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        events: "../testcalendar/fullcalendar/events.php",

        // Convert the allDay from string to boolean
        eventRender: function (event, element, view) {
            if (event.allDay === 'true') {
                event.allDay = true;
            } else {
                event.allDay = false;
            }
        },
        selectable: true,
        selectHelper: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
                var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
                $.ajax({
                    url: '../testcalendar/fullcalendar/add_events.php',
                    data: 'title=' + title + '&start=' + start + '&end=' + end,
                    type: "POST",

                });
                calendar.fullCalendar('renderEvent', {
                    title: title,
                    start: start,
                    end: end,
                    allDay: allDay
                },
                true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },
        editable: true,
        eventDrop: function (event, delta) {
            var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
            var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
            $.ajax({
                url: '../testcalendar/fullcalendar/update_events.php',
                data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                type: "POST",

            });
        },
        eventResize: function (event) {
            var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
            var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
            $.ajax({
                url: '../testcalendar/fullcalendar/update_events.php',
                data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                type: "POST",

            });

        },
        eventClick: function (calEvent, jsEvent, view) {

            alert('Id afspraak: ' + calEvent.id + '\nTitel afspraak: ' + calEvent.title + '\nBeschrijving afspraak: ' + calEvent.description + '\nStarttijd: ' + calEvent.start + '\nEindtijd: ' + calEvent.end);

        },

        eventMouseover: function (event, domEvent) {
            var layer = '<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="../testcalendar/editbt.png" title="edit" width="14" id="edbut' + event.id + '" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="../testcalendar/delete.png" title="delete" width="14" id="delbut' + event.id + '" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>';
            $(this).append(layer);
            $("#delbut" + event.id).hide();
            $("#delbut" + event.id).fadeIn(300);
            $("#delbut" + event.id).click(function () {
                $.ajax({
                    url: '../testcalendar/fullcalendar/delete_events.php',
                    data: 'id=' + event.id,
                    type: "POST",
                });
                var nTime = 1 * 50;
                window.setTimeout("location.reload()", nTime);
            });
            $("#edbut" + event.id).hide();
            $("#edbut" + event.id).fadeIn(300);
            $("#edbut" + event.id).click(function () {
                var title = prompt('\n\nNew Event Title: ');

                if (title) {
                    $.ajax({
                        url: '../testcalendar/fullcalendar/update_title.php',
                        data: 'title=' + title + '&id=' + event.id,
                        type: "POST",
                    });
                    var nTime = 1 * 50;
                    window.setTimeout("location.reload()", nTime);
                }

            });
        },

        eventMouseout: function (calEvent, domEvent) {
            $("#events-layer").remove();
        },

    });

});

Answer 1

You can use Jquery dialog box in event click like this http://jsfiddle.net/SzDsR/1/

Html code something like

<div id="dialog" title="My dialog" style="display:none">
<form>
    <fieldset>
        <label for="Id">Id</label>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
        <label for="Id">Title</label>
        <input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all">
    </fieldset>
</form>

and in fullcalendar

 eventClick: function (calEvent, jsEvent, view) {

        $("#dialog").dialog({
            autoOpen: false,

        }

        );

        $("#name").val(calEvent.id);

        $("#title").val(calEvent.title);

        $('#dialog').dialog('open');
    }