Question

我有一个模式窗口，该窗口在光滑的滑块内显示联系人表单。滑块是从API中提取的课程表。我遇到的问题是模态包含通过for每个循环的每个类预订的表单。如果我将模态移动到滑块之外，则它不会显示或不起作用，似乎只能抓住一个类。我尝试过移动所有内容，但是单击打开时无法使其正常工作。为了简单起见，我拿出了大多数模态代码

<div class="main-table-container">
 <div class="table-upper">
   <div class="schedule_heading">Book Your Class Today!</div>
    <div class="date">
        <p>Select a date to view class availability</p>
        <form action="" method="post" id="FromDate">
            <input type="text" id="datepicker" value="" name="FromDate" onchange="this.form.submit()"><i class="fa fa-calendar" aria-hidden="true"></i>
        </form>
    </div>    
    <div class="class-slider">
        <span class="prev-slide"><i class="fas fa-angle-left"></i> Previous Day</span>
        <span class="next-slide">Next Day <i class="fas fa-angle-right"></i></span>
    </div>
</div>
<div class="schedule_wrapper">
   <div class="schedule_container">
<?php
$dateD = array_column($data, 'Date');
$dateD = array_unique($dateD);
foreach($dateD as $dat) {

    $exp = explode("-", $dat);
    $m = $exp[0];
    $d = $exp[1];
    $y = $exp[2];

    $nD = $y."-".$m."-".$d;

    $d = new DateTime($nD);
    $newDate = $d->format('D F d');
?>
    <div class="schedule_item">
        <div class="date-heading"><?php echo $newDate; ?></div>
<?php
foreach ($data as $item) {
$chkCu = date('n-j-Y');
if($item['Date'] == $dat) {
?>
<div class="modal fade" id="book-schedule-<?php echo $item['ScheduleId']; ?>" tabindex="-1" role="dialog" aria-labelledby="book-schedule-<?php echo     $item['ScheduleId']; ?>" aria-hidden="true">
</div>
<?php

$startTime = strtotime($item['StartTime']);
$endTime = strtotime($item['EndTime']);

$chkAvaDate = $dat;
$chkCu = date('n-j-Y');
}
if($item['FreeSpots'] == 0) {
$freeBtn = "<span class='date-passed'>No Spots Available</span>";
}
else {
$freeBtn = "<span class='free-chk' data-toggle='modal' data-target='#book-schedule-".$item['ScheduleId']."'>Sign Up</span> ";
}

if($item['InstructorFirstName'] || $item['InstructorLastName']) {
$instructor = $item['InstructorFirstName'] ." ". $item['InstructorLastName'];
} 
else {
$instructor = "<span class='no-instructor'>No Instructor Yet</span>";
}
?>

<div class="schedule_item_box">
    <div class="class_start"><?php echo $item['StartTime']; ?>
        <em class="class_time"><?php echo human_readable_time_B($endTime-$startTime); ?></em>
    </div>
    <div class="class_title"><?php echo $item['Title']; ?></div>
    <div class="class_date" style="display:none;"><?php echo $item['Date']; echo $chkCu; ?></div>
    <div class="class_instructor"><?php echo $instructor; ?></div>
    <div class="class_btn"><?php echo $freeBtn; ?></div>
</div>
<?php
}
}
?>
</div>
<?php 
}
?>
</div>
<?php
}
?>

</div>
</div>
</div>
</div>
<?php endif;?>
<script>
jQuery(document).ready(function($) {
$('.schedule_container').slick({
    autoplay: true,
    prevArrow: $('.prev-slide'),
    nextArrow: $('.next-slide'),
  dots: false,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 1,

});
});
</script>

我是否需要分别分别运行？

在光滑的滑块内显示模式窗口

0 个答案: