响应式按钮脚本和数据切换

我正在使用Bootstrap，我想要做的是用按钮打开一个日期选择器。但是，我想在屏幕超过992px时正常弹出日期选择器，但如果屏幕大小低于992px，请在模式弹出窗口中打开日期选择器。响应式按钮脚本和数据切换

<div class="open-button" data-toggle="modal" data-target="#datepickerModal">

使用的屏幕尺寸浏览器打开了最初使按钮行为“棒”上面的代码。如果我在一个大于992px的窗口中打开它，它会弹出，但如果我将窗口缩小到992px以下，模式打开将不起作用。如果我在992px下打开窗口，那么如果我扩大窗口大小，模式将工作，但不弹出窗口。

我认为解决方案可能是通过脚本根据窗口宽度切换类（以便按钮不共享函数），但不知道如何使用数据切换属性来实现。

感谢您的任何帮助。

来源

2015-10-05 Ron Chan

您可以使用jQuery的调整触发如果您需要捕获的窗口大小调整：

$(window).resize(function() { 
    if($(window).width() >= 992){ 
     $(".open-button").data("toggle","modal"); 
    }else{ 
     $(".open-button").data("toggle","nonmodal"); 
});

如果modal请检查和非模态被设定好，因为我不可能搞清楚，当你想有模式或不

来源

2015-10-05 16:03:06 monxas

谢谢。但我想我是这样想出来的：

var boxW = $(window).innerWidth(); // FIND THE BROWSER WINDOW WIDTH 
    if(boxW > 992){ 
     $('#arrive-button').removeAttr('data-toggle'); 
     $('#arrive-button').removeAttr('data-target'); 
     $('#depart-button').removeAttr('data-toggle'); 
     $('#depart-button').removeAttr('data-target'); 
     $('#arrive-button').addClass('open-button'); 
     $('#depart-button').addClass('open-button'); 
    } else { // MOBILE 
     $('#arrive-button').attr('data-toggle', 'modal'); 
     $('#arrive-button').attr('data-target', '#datepickerModal'); 
     $('#depart-button').attr('data-toggle', 'modal'); 
     $('#depart-button').attr('data-target', '#datepickerModal'); 
     $('#arrive-button').removeClass('open-button'); 
     $('#depart-button').removeClass('open-button'); 
    }

不知道数据目标是否过度杀伤。不知道有关'数据切换'是属性。咄。

来源

2015-10-05 16:47:19

响应式按钮脚本和数据切换

回答

相关问题