Диалоговые окна на boostrap5 + jquery
Лень двигатель прогресса (с). В одной из задач, используется довольно большое количество однотипных окон с вопросами и кнопками -Да, Нет, Ок и т.д. Чтобы не рисовать каждый раз эти окна руками в коде html, можно поступить лучше: оформить создание диалогового окна «на лету» с вызовом пользовательской функции по нажатию какой-то из кнопок.
Решение:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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); } |