Question

当我在包含另一个php文件的div中包含一个带有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标记中删除模式类时，一切正常，我知道模式应该在顶部，但是没有其他方法吗？

Answer 1

PHP包含文件不是问题。没有理由为什么您不能在PHP包含文件中具有Bootstrap模态。在呈现DOM之前，将包含文件注入HTML代码中，因此应该没有问题。

但是......问题可能是在另一个div -

中将Bootstrap模态对话框结构添加到了HTML
<div class="tab-pane fade" id="Agenda"> <?php include("agenda.php"); ?> </div>

Bootstrap模态应位于body标签下的第一级。这就是Bootstrap期望的。这样做不成问题，因为直到显示Bootstrap模态为止，它才是不可见的...抵制在Bootstrap div中添加HTML外部容器的其他层的诱惑，直到您完全确定了解了Bootstrap脚手架

此外，在相同的#Agenda div（模态对话框所在的那个div）上具有fade标签可能不是一个好主意。 请注意，您不需要在#Agenda div内使用模式即可将其用于议程（日历？）功能。

我建议在解决问题之前，摆脱所有包含文件。将PHP包含文件中的代码粘贴到主体中，以便只有一个index.php文件，没有包含文件。一旦工作，就可以将其分解为包含文件。 简化解决方案。

包含在php文件中时，不显示模式div

1 个答案: