Bonjour,
Je cherche à générer dynamiquement les message à l'aide des boites de dialogue en utilisant Semantic UI (semantic-ui.com). Je fais fasse à une erreur que je n'arrive pas à interpreter.
Ce que je fais
/**
* Fonction permettant de générer les box de message
* @param messageText
* @param headerText
* @param type
* @return boolean
*/
let messageBox = function (messageText, headerText, type='Yes') {
let box = document.createElement('div');
box.className = 'ui tiny modal';
box.setAttribute('id', 'messageBox');
let head = document.createElement('div');
head.className = 'header';
head.innerHTML = headerText;
box.append(head);
let content = document.createElement('div');
content.innerHTML = messageText;
box.append(content);
let action = document.createElement('div');
action.className = 'actions';
let yes; let no;
switch (type) {
case "Yes":
yes = document.createElement('div');
yes.className = 'ui positive button';
yes.innerHTML = 'OK';
action.append(yes);
box.append(action);
document.body.append(box);
let msg = document.querySelector('.ui.tiny.modal');
console.log(msg);
msg.modal({
closable: false,
onApprove: function () {
return true;
}
}).modal('show');
break;
case 'YesNo':
yes = document.createElement('div');
yes.className = 'ui positive right labeled icon button';
yes.innerHTML = 'Oui' + '<i class="checkmark icon"></i>';
no = document.createElement('div');
no.className = 'ui negative button';
no.innerHTML = 'Non';
action.append(no);
action.append(yes);
box.append(action);
box.modal({
closable: false,
onDeny: function () {
return false;
},
onApprove: function () {
return true;
}
}).modal('show');
break;
default:
yes = document.createElement('div');
yes.className = 'ui positive button';
yes.innerHTML = 'OK';
action.append(yes);
box.append(action);
box.modal({
closable: false,
onApprove: function () {
return true;
}
}).modal('show');
break;
}
};
Ce que je veux
Ce que je dois obtenir est semblable à ce qu'il y a sur le site web de Semantic UI, concernant les fenêtres modales
https://semantic-ui.com/modules/modal.html
Ce que j'obtiens
Uncaught TypeError: msg.modal is not a function
at messageBox (app.js:60)
at HTMLButtonElement.<anonymous> (create:428)