单击按钮时，会触发事件并加载模态 具有动态内容的窗口。但是带动态幻灯片的JSSOR滑块是 不在这个模态窗口内工作。
<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">×</span></button>
<h4 class="modal-title" id="deleteProductModalLabel"></h4>
</div>
<div class="modal-body">
</div>
</div>
这就是我用来将动态数据加载到模态窗口的JQuery。 `
$(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*/
});
页面中有多个按钮，当有人点击时 按钮，弹出模态窗口和模态内的滑块 应加载一组特定的动态图像 那个按钮id。相同的滑块在模态下工作正常而不使用 动态内容。
如果有人能帮我解决这个问题，我将不胜感激。