Question

我正在使用Bootstrap，我想要做的是打开一个带按钮的日期选择器。但是我想在屏幕超过992px时正常打开日期选择器作为弹出窗口但是如果屏幕尺寸小于992px，则在模式弹出窗口内打开日期选择器。

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

使用上面的代码，无论屏幕大小如何，浏览器都会打开，最初使按钮行为“坚持不懈”。如果我在一个大于992px的窗口中打开它，它会弹出一个弹出窗口，但如果我将窗口缩小到992px以下，则模态打开不会起作用。如果我在992px下打开窗口，如果我扩展窗口大小，模态将起作用，但不会弹出窗口。

我认为解决方案可能是根据窗口宽度通过脚本切换类（因此按钮不共享功能）但不确定如何使用data-toggle属性执行此操作。

感谢您提供任何帮助。

Answer 1

如果需要捕获窗口大小调整，可以在jquery中使用resize触发器：

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

请检查模态和非模态是否设置良好，因为我无法弄清楚何时需要模态

Answer 2

感谢。但我想我是这样想的：

    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');
    }

不知道做数据目标是否过度。没有人知道有关数据切换的信息。是一个属性。咄。

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

2 个答案: