FullCalendar modal sur l'événement, cliquez sur ne pas afficher correctement

Je suis en train de faire un supprimer/supprimer des popup sur fullcalendar lorsque je clique sur l'événement existant.

À l'aide de JQueryUI du dialogue, quelque chose est partiellement affichée.

(note. mes événements sont tous les événements externes qui ont été supprimés à partir du menu latéral)

Les deux méthodes suivantes sont les plus proche je suis arrivé à afficher quelque chose.

La méthode 1 avec dialogue en eventRender

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

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

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

Méthode 2 avec la boîte de dialogue dans eventClick

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

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

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

les deux comportements sont les mêmes
Il affiche le titre de fectched événement et bouton de fermeture.
Mais la fenêtre de dialogue de la fenêtre n'est pas là (pas entouré).

Il affiche seulement les textes sur fullcalendar .

Quelqu'un pourquoi la boîte de dialogue ne s'affiche pas correctement? La fenêtre est uniquement l'affichage de texte.

Aussi, je n'ai pas si je devrais inclure toute particulière de code css pour la fenêtre pop-up, mais ce sont tous des css de mon code.

Donc si je manque un peu de css pour fenêtre pop-up, quelqu'un peut-il m'informer de la référence, le code css pour la boîte de dialogue popup?

 <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>

et mon .js liens..

<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>

J'ai répondu à la validité de la partie de cette question: Why isn't this modal displaying correctly? La première partie sur bootstrap n'est pas le cas DONC format. Chaque poste doit être seulement 1 question et des questions comme Why doesn't X work? besoin d'un MVCE.
Je viens de faire un grand modifier à votre question, qui a réduit le champ d'application considérablement. Vous êtes invités à revenir si vous n'aimez pas les changements, mais que votre question était avant qu'il finirait par être fermé.

OriginalL'auteur user1915570 | 2015-04-30

3

Le modal ne s'affiche pas correctement parce que vous n'avez pas le jquery ui css chargé.
```
<link href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.css' rel='stylesheet' />
```
Et aller avec le eventClick méthode.

Edit 1:

Je n'ai pas de chance pour afficher la boîte de dialogue... il montre encore que du texte...

Très bien, essayez ceci:
```
eventClick: function(event){
    $("<div>").dialog({ modal: true, title: event.title, width:350});
},
```
Cela va créer un nouvel élément et d'en faire une boîte de dialogue.

Merci pour la réponse. J'ai ajouté jquery-ui.les css .... cependant, je n'ai pas de chance pour afficher la boîte de dialogue... il montre encore que le texte...
Ajouté quelque chose d'autre.
Merci encore, oui, j'ai changé pour cette : eventClick: function(event) {$("<div>").dialog({ modal: true, title: event.title, width:350}); },", mais le résultat est toujours le même, seul le texte, pas de boîte. Le résultat est exactement le même que l'image dans le origianl question
Le même code fonctionne dans ce JSFiddle. Est-il rien de différent avec le vôtre? Et êtes-vous sûr que le css j'ai relié correctement? (Ma réponse avait le code un peu mal, j'ai corrigé)
mais quand j'utilise $("<div>").dialog({ modal: true, title: event.title, width:350}); , il affiche sur le dessus les uns des autres (plusieurs évènements titre affiché sur le dessus de chaque autre avec des couches) au lieu de les effacer (le précédent disparaît et l'affichage du titre) quand j'ai cliqué sur plusieurs événements. mais toujours pas de boîte de dialogue

OriginalL'auteur slicedtoad

Je réponds à ma propre question. J'ai trouvé la solution moi-même. mais je ne suis pas vraiment en mesure d'expliquer depuis que je suis de nouveau à cela. mais je pense que cela peut aider quelqu'un ayant les mêmes problèmes et pour ma propre sauvegarde de la mémoire. Je décide de poster une réponse à ma propre question.

Je ne pouvais pas réussir avec la boîte de dialogue (box n'affiche pas seulement en mesure d'afficher le texte).

Après plusieurs jours d'efforts et avec [référence] pour le code 2) 3), je décide d'essayer avec bootstrap modal de nouveau.
puis j'ai eu une chance.. voici donc le code de travail.

1) tout d'abord, tous les liens dont j'ai besoin (j'ai pensé que la combinaison de liens dont j'ai besoin et c'était un peu partie de la clé qui vous permettra de) =>

<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)partie javascript : eventClick code dans fullcalendar code

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

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

3) html, bootstrap modal partie

     <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>

et grâce à @slicedtoad , continuer à motiver moi!

Vous avez à la fois la minimisé et la version standard de l'amorçage et de scripts jquery. Vous avez seulement besoin de l'un ou de l'autre, de préférence le minimisé (.min)

OriginalL'auteur user1915570

Vous devez vous connecter pour publier un commentaire.