Метка: bootstrap

Диалоговые окна на boostrap5 + jquery

WEB

Лень двигатель прогресса (с). В одной из задач, используется довольно большое количество однотипных окон с вопросами и кнопками -Да, Нет, Ок и т.д. Чтобы не рисовать каждый раз эти окна руками в коде html, можно поступить лучше: оформить создание диалогового окна «на лету» с вызовом пользовательской функции по нажатию какой-то из кнопок.

Решение:

function UUID_V4() {
    var S4 = function() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

function Dialog(title,message,buttons=Array(),callback=function(){}){
  var uuid=UUID_V4();  
       html='<div class="modal fade" id="'+uuid+'" tabindex="-1" role="dialog" aria-labelledby="'+uuid+'Label" aria-hidden="true">';
  html=html+' <div class="modal-dialog modal-lg">';
  html=html+'  <div class="modal-content">';
  html=html+'    <div class="modal-header">';
  html=html+'      <h5 class="modal-title" id=""'+uuid+'Label">'+title+'</h5>';
  html=html+'      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
  html=html+'    </div>';
  html=html+'    <div class="modal-body">';
  html=html+'        <p>'+message+'</p>';
  html=html+'    </div>';
  html=html+'    <div class="modal-footer">';
  buttons.forEach(function(bt, index, array) {
    if (index==0){
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-secondary" data-bs-dismiss="modal">'+bt+'</button>';  
    } else {
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-primary" data-bs-dismiss="modal">'+bt+'</button>';  
    };    
  });
  html=html+'    </div>';
  html=html+'  </div>';
  html=html+' </div>';
  html=html+'</div>';
  $("body").append(html);
  $("#"+uuid).modal("show");
  $("#"+uuid).on("hidden.bs.modal", function () {
    console.log("--закрыли окно");
    $("#"+uuid).remove();
  });
};
Dialog("Привет","Тут какой-то текст",["Ок","Отмена"],ResultTestDialog);

function ResultTestDialog(result){
    console.log("!",result);
}
Оставить комментарий , ,

Bootstrap 5: отслеживание переключения вкладок (табов)

WEB

Задача: отследить переключение вкладок пользователем

Решение:

var tabEl = document.querySelector('#myTab')
    tabEl.addEventListener('shown.bs.tab', function (e) {       
      atab=$(e.target).attr("id");
      console.log("--щелкнули по табу"+atab);        
    })
Оставить комментарий , ,

Bootstrap: модальное окно в модальном

WEB

Без поправок в CSS, модальное окно, открытое в модальном окне, выглядит не презентабельно — нет краёв.

Что бы поправить ситуацию, достаточно добавить CSS:

.modal:nth-of-type(even) {
    z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1061 !important;
}
Оставить комментарий , ,

Как узнать версии скриптов используемых на сайте.

WEB

А именно Jquery, Bootstrap, JqGrid и т.п. Ну например так:

 

Оставить комментарий , , , , , ,

bootstrap-editable и пароли

WEB, Из жизни

Задача: необходимо обеспечить скрытие пароля для пользователя.

Решение: