модальный div не отображается при включении в php файл - PullRequest
Новая
       17

модальный div не отображается при включении в php файл

0 голосов
/ 09 апреля 2019

Когда я включаю файл повестки дня.php, который содержит div с модальным классом начальной загрузки внутри 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">&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">&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, он прекрасно работает, я знаю, что модальный должен быть сверху, но нет ли другого метода?

1 Ответ

0 голосов
/ 09 апреля 2019

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

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

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

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

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

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

...