Php 在模式窗口内显示JSSOR滑块

单击按钮时，会触发一个事件，并加载一个模式 具有动态内容的窗口。但是带有动态幻灯片的JSSOR滑块是 无法在此模式窗口内工作

页面中有多个按钮，当有人单击 按钮，模态窗口应弹出，并在模态内滑动 应加载一组动态图像，这些图像特定于 该按钮id。相同的滑块在模式中工作良好，无需使用 动态内容

---

如果有人能帮我解决这件事，我将不胜感激。

带动态幻灯片的滑块在这个模式窗口中不工作

——这意味着什么？不展示？不滑？抛出错误？你在哪里初始化滑块？@Jeremy它没有滑动，只显示一个image@cmorrissey我在页面的开头初始化它。等等，我将编辑我的问题并添加该部分。您需要在AJAX成功方法中启动滑块。元素不存在，无法在调用它时启动它。

<div class="modal fade" id="deleteProductModal" tabindex="-1" role="dialog"      aria-labelledby="deleteProductModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg ">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="deleteProductModalLabel"></h4>
  </div>
  <div class="modal-body">
  </div>
</div>

$(document).ready(function () {
 $('#deleteProductModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var productid = button.data('productid') // Extract info from data-* attribute

  $.ajax({
    type : 'POST',
    data : 'roomid='+productid,
    url : "<?php echo base_url(); ?>index.php/HotelController/index",
    success :   function(data){

        var str_html = '<div class="row"><div class="col-md-8"> <div id="jssor_2" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: auto; height: 300px; overflow: hidden;">';
        str_html += '<div data-u="loading" style="position: absolute; top: 0px; left: 0px;"><div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div><div style="position:absolute;display:block;top:0px;left:0px;width:100%;height:100%;"></div></div><div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: auto; height: 300px; overflow: hidden;">';

        for(i=0;i<data.roomimages.length;i++)
        {
           str_html += '<div data-p="144.50"><img height="300" width="100%"" data-u="image" src="../../';
           str_html += data.roomimages[i].image_path;
           str_html += '"/><img height="100%" data-u="thumb" src="../../';
           str_html += data.roomimages[i].image_path;
           str_html += '"/></div>';
       }

       str_html += '</div><div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:100%;height:72px;" data-autocenter="1"><div style="position: absolute; top: 0; left: 0; width: 100%; height:72px; background-color: #000; filter:alpha(opacity=30.0); opacity:0.3;"></div><div data-u="slides" style="cursor: default;"><div data-u="prototype" class="p"><div class="w"><div data-u="thumbnailtemplate" class="t"></div></div> <div class="c"></div></div> </div></div><span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span><span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span></div></div><div class="col-md-4"><h5>Bed:';
       str_html += '1 double bed';
       str_html += '</h5> <h4> Room facilities:</h4><ul>'
       str_html += '<p>Fitted with a terrace offering pool and garden views, each room features satellite TV, an electric kettle and a minibar. The en suite bathroom offers shower facilities and a hairdryer.</p><h4> Price Details:</h4><ul>'
       if(data.roomdetails.price_only_bed!=null)
       {
           str_html +='<li>Rs.'
           str_html += data.roomdetails.price_only_bed
           str_html += '  - Room Only</li>'
       }
       if(data.roomdetails.price_bed_breakfast!=null)
       {
           str_html+='<li>'
           str_html += 'Rs.'+data.roomdetails.price_bed_breakfast
           str_html += '  - Fabulous Breakfast Included.</li>'
       }
       str_html+='</ul>';  
       str_html += '</div></div></div><div class="modal-footer"><ul class="row">'
       var facilities_room=  JSON.parse(data.roomdetails.room_facilities) ;

       for (x=0;x<facilities_room.length;x++)
       {
        str_html+='<li class= "col-md-3" style="text-align:left;">';
        str_html+= facilities_room[x];
        str_html+='</li>';
    }        
    str_html+='</ul></div> </div></div>';
    var title =   "Room Details  -  "+data.roomdetails.room_type + " Room";
    var modal =   $('#deleteProductModal');
    modal.find('.modal-title').text(title);
    modal.find('.modal-body').html(str_html);
   }
});
});
});`

  jQuery(document).ready(function ($) {
        var jssor_2_SlideshowTransitions = [
           {$Duration: 1200, x: 0.3, $During: {$Left: [0.3, 0.7]}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, x: -0.3, $SlideOut: true, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, x: -0.3, $During: {$Left: [0.3, 0.7]}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, x: 0.3, $SlideOut: true, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, y: 0.3, $During: {$Top: [0.3, 0.7]}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, y: -0.3, $SlideOut: true, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, y: -0.3, $During: {$Top: [0.3, 0.7]}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, y: 0.3, $SlideOut: true, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, x: 0.3, $Cols: 2, $During: {$Left: [0.3, 0.7]}, $ChessMode: {$Column: 3}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, x: 0.3, $Cols: 2, $SlideOut: true, $ChessMode: {$Column: 3}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, y: 0.3, $Rows: 2, $During: {$Top: [0.3, 0.7]}, $ChessMode: {$Row: 12}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, y: 0.3, $Rows: 2, $SlideOut: true, $ChessMode: {$Row: 12}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, y: 0.3, $Cols: 2, $During: {$Top: [0.3, 0.7]}, $ChessMode: {$Column: 12}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, y: -0.3, $Cols: 2, $SlideOut: true, $ChessMode: {$Column: 12}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, x: 0.3, $Rows: 2, $During: {$Left: [0.3, 0.7]}, $ChessMode: {$Row: 3}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, x: -0.3, $Rows: 2, $SlideOut: true, $ChessMode: {$Row: 3}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: {$Left: [0.3, 0.7], $Top: [0.3, 0.7]}, $ChessMode: {$Column: 3, $Row: 12}, $Easing: {$Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: {$Left: [0.3, 0.7], $Top: [0.3, 0.7]}, $SlideOut: true, $ChessMode: {$Column: 3, $Row: 12}, $Easing: {$Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: {$Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: {$Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: {$Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
           {$Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260, $Easing: {$Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2}
           ];
           var jssor_2_options = {
               $AutoPlay: true,
               $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_2_SlideshowTransitions,
                $TransitionsOrder: 1
            },
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
            },
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $Cols: 9,
                $SpacingX: 3,
                $SpacingY: 3,
                $Align: 260
            }
        };

        var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);

        /*responsive code begin*/
        /*you can remove responsive code if you don't want the slider scales while window resizing*/
        function ScaleSlider1() {
            var refSize = jssor_2_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 600);
                jssor_2_slider.$ScaleWidth(refSize);
            } else {
                window.setTimeout(ScaleSlider1, 30);
            }
        }
        ScaleSlider1();
        $(window).bind("load", ScaleSlider1);
        $(window).bind("resize", ScaleSlider1);
        $(window).bind("orientationchange", ScaleSlider1);
        /*responsive code end*/
    });