事件上的FullCalendar模式单击无法正确显示

Question

当我点击现有事件时，我正试图在fullcalendar上删除/删除弹出窗口。

使用JQueryUI的对话框，可以部分显示某些内容。

（注意。我的事件都是从侧边菜单中删除的所有外部事件）

以下两种方法是我最接近显示的东西。

方法1，在eventRender中使用对话框

$('#calendar').fullCalendar({
  ….

     eventRender: function (event, element){
          $("#eventContent").dialog({ modal: true, title: event.title, width:350});      });
 ….
});

<div id="eventContent" title="Event Details" >
</div>

和

方法2，在eventClick中使用对话框

$('#calendar').fullCalendar({
  ….

     eventClick: function(event){
          $("#eventContent").dialog({ modal: true, title: event.title, width:350});      });
 ….
});

<div id="eventContent" title="Event Details" >
</div>

两种行为都相同它显示了fectched事件和关闭按钮的标题。 但弹出对话框窗口不存在（未被包围）。

它仅显示fullcalendar上的文本。

有人为什么对话框没有正确显示？ 该窗口仅显示文本。

另外，如果我应该为弹出窗口包含任何特定的css代码，我不会这样做，但这些都是我的代码中的css。

所以，如果我错过弹出窗口的一些CSS，有人可以告诉我对话框弹出的参考css代码吗？

 <style>

        body {
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

        #wrap {
            width: 1100px;
            margin: 0 auto;
        }

        #external-events {
            float: left;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
            text-align: left;
        }

        #external-events h4 {
            font-size: 16px;
            margin-top: 0;
            padding-top: 1em;
        }

        #external-events .fc-event {
            margin: 10px 0;
            cursor: pointer;
        }

        #external-events p {
            margin: 1.5em 0;
            font-size: 11px;
            color: #666;
        }

        #external-events p input {
            margin: 0;
            vertical-align: middle;
        }

        #calendar {
            float: right;
            width: 900px;
        }
</style>

和我的.js链接..

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>

Answer 1

模态未正确显示，因为您没有加载jquery ui css。

<link href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.css' rel='stylesheet' />

并使用eventClick方法。

编辑1：

我没有运气显示对话框...它仍然只显示文字...

好的，试试这个：

eventClick: function(event){
    $("<div>").dialog({ modal: true, title: event.title, width:350});
},

这将创建一个新元素并使其成为一个对话框。

Answer 2

我回答我自己的问题。 我自己找到了解决方案。 但我不能解释，因为我是新手。 但我认为这可能有助于有类似麻烦的人和我自己的记忆备份。 我决定回答我自己的问题。

我无法通过对话框成功（框不显示只能显示文本）。

经过几天的努力和[参考]代码2）3），我决定再次尝试使用bootstrap模式。 然后我得到了运气..所以这里是工作代码。

1）首先，我需要的所有链接（我想到了我需要的链接组合，这是使其工作的关键部分）=>

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal-bs3patch.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/img/ajax-loader.gif"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.min.js"></script>

2）javascript部分：fullcalendar代码中的eventClick代码

$('#calendar').fullCalendar({
  ….

     eventClick: function(event){
         $('#modalTitle').html(event.title);
         $('#modalBody').html(event.description);
         $('#fullCalModal').modal();
     },
     ….
 });

3）html，bootstrap模态部分

     <div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span> <span class="sr-only">close</span></button>
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-primary">Remove</button>
            </div>
        </div>
    </div>
</div> 

并感谢@slicedtoad，继续激励我！