Блог

когда я включаю agenda.php файл, который содержит div с модальным классом bootstrap внутри div в другом файле php, не отображается должным образом.

agenda.php

 <style type="text/css">
        .block a:hover{
            color: silver;
        }
        .block a{
            color: #fff;
        }
        .block {
            position: fixed;
            background: #2184cd;
            padding: 20px;
            z-index: 1;
            top: 240px;
        }
    </style>



<!-- Place this tag where you want the badge to render. -->



<br /><br />
<hr />  

<!--<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
<link  href="css/bootstrap.min.css" rel="stylesheet" >
-->


<!-- add calander in this div -->
<div class="container">
  <div class="row">
<div id="calendar"></div>

</div>
</div>


<!-- Modal -->
<div id="createEventModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">amp;times;</button>
        <h4 class="modal-title">Add Event</h4>
      </div>
      <div class="modal-body">
            <div class="control-group">
                <label class="control-label" for="inputPatient">Event:</label>
                <div class="field desc">
                    <input class="form-control" id="title" name="title" placeholder="Event" type="text" value="">
                </div>
            </div>

            <input type="hidden" id="startTime"/>
            <input type="hidden" id="endTime"/>



        <div class="control-group">
            <label class="control-label" for="when">When:</label>
            <div class="controls controls-row" id="when" style="margin-top:5px;">
            </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button type="submit" class="btn btn-primary" id="submitButton">Save</button>
    </div>
    </div>

  </div>
</div>


<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">amp;times;</button>
            <h4 class="modal-title">Event Details</h4>
        </div>
        <div id="modalBody" class="modal-body">
        <h4 id="modalTitle" class="modal-title"></h4>
        <div id="modalWhen" style="margin-top:5px;"></div>
        </div>
        <input type="hidden" id="eventID"/>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
        </div>
    </div>
</div>
</div>
<!--Modal-->


<div style='margin-left: auto;margin-right: auto;text-align: center;'>
</div>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-21769945-4', 'auto');
  ga('send', 'pageview');

</script>
<div>
  <h1> La fin ya scampo </h1>
</div>

 </div>

  

index.php

 ...
...
<div class="tab-pane fade" id="Agenda">
    <?php include("agenda.php"); ?>
</div>
...
...
  

я ожидаю, что код покажет календарь в части моего index.php.
PS: когда я удаляю модальный класс из тега div, все работает нормально, я знаю, что модальный класс должен быть в верхней части, но разве нет другого метода?

Проблема не во включаемом файле PHP. Нет причин, по которым вы не можете использовать Bootstrap modal во включаемом файле PHP. Включаемый файл вводится в HTML-код перед отображением DOM, поэтому проблем возникнуть не должно.

ОДНАКО… Возможно, проблема заключается в добавлении структуры модального диалогового окна Bootstrap в HTML внутри другого div —

 <div class="tab-pane fade" id="Agenda">
    <?php include("agenda.php"); ?>
</div>
  

Модальный загрузчик должен быть на первом уровне под тегом body. Именно этого ожидает Bootstrap. Выполнение этого не должно быть проблемой, поскольку загрузочный модал невидим до отображения… Не поддавайтесь искушению добавить дополнительные слои внешних контейнеров HTML к разделам начальной загрузки, пока вы не действительно уверены, что понимаете структуру Bootstrap.

Кроме того, наличие тега fade в том же #Agenda div (том, в котором находится модальное диалоговое окно) может быть не очень хорошей идеей. Обратите внимание, что вам не нужен модальный внутри div #Agenda, чтобы использовать его для функциональности повестки дня (календаря?).

Я предлагаю, пока вы не решите свою проблему, избавиться от всех включенных файлов. Возьмите код из ваших PHP include файлов и вставьте его в основной текст, чтобы у вас был только один index.php файл, не содержащий включений. Как только вы заработаете, вы сможете разбить все на включаемые файлы. Упростить решение.