title: Open dialog instead of alert/prompt in jquery
body: <p>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?</p>
  
  <p>My jQuery code is as follow:</p>
  
  <pre><code>$(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 + '&amp;start=' + start + '&amp;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 + '&amp;start=' + start + '&amp;end=' + end + '&amp;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 + '&amp;start=' + start + '&amp;end=' + end + '&amp;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 = '&lt;div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"&gt;&lt;a&gt;&lt;img src="../testcalendar/editbt.png" title="edit" width="14" id="edbut' + event.id + '" border="0" style="padding-right:3px; padding-top:2px;" /&gt;&lt;/a&gt;&lt;a&gt;&lt;img src="../testcalendar/delete.png" title="delete" width="14" id="delbut' + event.id + '" border="0" style="padding-right:5px; padding-top:2px;" /&gt;&lt;/a&gt;&lt;/div&gt;';
              $(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 + '&amp;id=' + event.id,
                          type: "POST",
                      });
                      var nTime = 1 * 50;
                      window.setTimeout("location.reload()", nTime);
                  }
  
              });
          },
  
          eventMouseout: function (calEvent, domEvent) {
              $("#events-layer").remove();
          },
  
      });
  
  });
  </code></pre>