twitter-bootstrap 事件单击时的 FullCalendar 模式显示不正确
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29965136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FullCalendar modal on event click not displaying correctly
提问by user1915570
I'm trying to make a delete/remove popup on fullcalendar when I click the existing event.
当我单击现有事件时，我试图在 fullcalendar 上创建一个删除/删除弹出窗口。
Using JQueryUI's dialog, something is partially displayed.
使用 JQueryUI 的对话框，可以部分显示某些内容。
(note. my events are all external events which have been dropped from side menu)
（注意。我的事件都是从侧边菜单中删除的外部事件）
The following two methods are the closest I got to displaying something.
以下两种方法是我最接近显示内容的方法。
Method 1 with dialog in eventRender
方法 1 在 eventRender 中使用对话框
$('#calendar').fullCalendar({
….
eventRender: function (event, element){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
and
和
Method 2 with dialog in eventClick
方法 2 在 eventClick 中使用对话框
$('#calendar').fullCalendar({
….
eventClick: function(event){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
both behaviors are same It shows the title of fectched event and close button. But popup dialog window is not there (not surrounded).
两种行为都相同它显示了 fectched 事件和关闭按钮的标题。但是弹出对话框窗口不存在（没有被包围）。
It displays only texts on fullcalendar .
它仅在 fullcalendar 上显示文本。
Does anyone why the dialog isn't displaying properly? The window is only displaying text.
有没有人为什么对话框显示不正确？该窗口仅显示文本。
Also, I don't if I should include any particular css code for the popup window but these are all css from my code.
另外，如果我应该为弹出窗口包含任何特定的 css 代码，我不知道，但这些都是来自我的代码的 css。
So if I am missing some css for popup window, can anyone inform me of the reference css code for the dialog popup?
因此，如果我缺少弹出窗口的一些 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>
and my .js links..
和我的 .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>
采纳答案by user1915570
I answer my own question. I have found solution myself. but I am not really able to explain since I am new to this. but I think this may help someone with similar trouble and for my own memory backup. I decide to post answer to my own question.
我回答我自己的问题。我自己找到了解决方案。但我真的无法解释，因为我是新手。但我认为这可能会帮助有类似问题的人以及我自己的记忆备份。我决定发布我自己问题的答案。
I couldn't succeed with dialog (box doesn't display only able to display text).
我无法成功使用对话框（框不显示只能显示文本）。
After several days of efforts and with[reference]for the code 2) 3), I decide to try with bootstrap modal again. then I got a luck.. so here is working code.
经过几天的努力和[参考]代码2) 3)，我决定再次尝试使用引导模式。然后我很幸运..所以这里是工作代码。
1) At first, all links I need (I figured what combination of links I need and this was kind of key part that make it work) =>
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 part : eventClick code in fullcalendar code
2）javascript部分：完整日历代码中的eventClick代码
$('#calendar').fullCalendar({
….
eventClick: function(event){
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#fullCalModal').modal();
},
….
});
3) html, bootstrap modal part
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">×</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>
and thanks to @slicedtoad , keep motivating me!
感谢@slicedtoad，继续激励我！
回答by DanielST
The modal isn't showing correctly because you don't have the jquery ui css loaded.
模态显示不正确，因为您没有加载 jquery ui css。
<link href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.css' rel='stylesheet' />
And go with the eventClick method.
并使用 eventClick 方法。
Edit 1:
编辑1：
I have no luck to display the dialog box... it shows still only text...
我没有运气显示对话框......它仍然只显示文本......
Okay, try this:
好的，试试这个：
eventClick: function(event){
$("<div>").dialog({ modal: true, title: event.title, width:350});
},
This will create a new element and make it a dialog.
这将创建一个新元素并使其成为一个对话框。
