在模态窗口内显示JSSOR滑块
单击按钮时，将触发事件并加载带有动态内容的模态窗口。 但是带有动态幻灯片的JSSOR滑块在此模态窗口中不起作用。
这就是我用来将动态数据加载到模态窗口的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 : "index.php/HotelController/index", success : function(data){ var str_html = ' '; str_html += '
'; for(i=0;i<data.roomimages.length;i++) { str_html += '
'; } str_html += '
Bed:'; str_html += '1 double bed'; str_html += '
Room facilities:
' str_html += '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.
Price Details:
' if(data.roomdetails.price_only_bed!=null) { str_html +='- Rs.' str_html += data.roomdetails.price_only_bed str_html += ' - Room Only
' } if(data.roomdetails.price_bed_breakfast!=null) { str_html+='- ' str_html += 'Rs.'+data.roomdetails.price_bed_breakfast str_html += ' - Fabulous Breakfast Included.
' } str_html+='
'; str_html += '
'; 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。 相同的滑块在模态中工作正常，而不使用动态内容。
如果有人能帮我解决这个问题，我将不胜感激。