Реактивный скрипт кнопки и перетаскивание данных

Question

Я использую Bootstrap, и то, что я пытаюсь сделать, это открыть кнопку datepicker с помощью кнопки. Тем не менее, я хочу открыть шаблон datepicker обычно как всплывающее окно, когда экран превышает 992px, но если размер экрана меньше 992px, откройте datepicker внутри модального всплывающего окна.

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

Используя приведенный выше код, размер экрана, который браузер открывает, изначально заставляет кнопку «придерживаться» кнопки. Если я открою его в окне размером больше 992px, он откроется как всплывающее окно, но если я уменьшу окно под 992px, модальный open не будет работать. Если я открою окно под 992px, модальное будет работать, но не всплывающее окно, если я разберу размер окна.

Я думаю, что решение, вероятно, должно переключать классы через скрипт в зависимости от ширины окна (так что кнопка не передает функции), но не знает, как это сделать с атрибутом data-toggle.

Спасибо за любую помощь по этому вопросу.

Answer 1

Вы можете использовать размер триггера в JQuery, если вам нужно, чтобы захватить окно изменения размера:

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

Не знаю, является ли выполнение цели данных излишним. Не знал о атрибуте data-toggle. Duh.