Skip to content

Commit 22a8363

Browse files
ovaqlabovaqlab
authored
Multiple modal creation issues solved
1 parent 5ba49fc commit 22a8363

File tree

1 file changed

+105
-103
lines changed

1 file changed

+105
-103
lines changed

‎simpleDialog.js‎

Lines changed: 105 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -26,118 +26,120 @@
2626
*/
2727

2828
;(function ($) {
29-
$.simpleDialog = function (options, onSuccess, onClose) {
30-
var template = null;
29+
$.simpleDialog = function (options) {
30+
var template = null;
31+
var currentID = Date.now();
3132

32-
function valdateOptions(success) {
33-
if ((options.title || options.message) && options.modalContent) {
34-
console.error("simpleDialog only accepts either modal content or title and message");
35-
return;
36-
} else {
37-
success();
38-
}
39-
}
33+
function valdateOptions(success) {
34+
if ((options.title || options.message) && options.modalContent) {
35+
console.error("simpleDialog only accepts either modal content or title and message");
36+
return;
37+
} else {
38+
success();
39+
}
40+
}
4041

4142

42-
/**
43-
* Initializing modal with modal options
44-
*/
45-
function init() {
46-
if (options.modalContent) {
47-
options.modalContent = options.modalContent.strReplace({
48-
title: options.title,
49-
message: options.message
50-
});
51-
} else {
52-
console.error("Empty modal content. simpleDialog only accepts either modal content or title and message");
53-
return;
54-
}
43+
/**
44+
* Initializing modal with modal options
45+
*/
46+
function init() {
47+
if (options.modalContent) {
48+
options.modalContent = options.modalContent.strReplace({
49+
title: options.title,
50+
message: options.message
51+
});
52+
} else {
53+
console.error("Empty modal content. simpleDialog only accepts either modal content or title and message");
54+
return;
55+
}
5556

56-
if (!options.closeButton)
57-
options.closeButtonTemplate = '';
58-
else {
59-
options.closeButtonTemplate = options.closeButtonTemplate.strReplace({
60-
closeBtnText: options.closeBtnText,
61-
closeBtnClass: options.closeBtnClass
62-
});
63-
}
57+
if (!options.closeButton)
58+
options.closeButtonTemplate = '';
59+
else {
60+
options.closeButtonTemplate = options.closeButtonTemplate.strReplace({
61+
closeBtnText: options.closeBtnText,
62+
closeBtnClass: options.closeBtnClass
63+
});
64+
}
6465

65-
template = '<div class="modal fade window-t-xs-40" id="simple-dialog-modal" tabindex="-1" role="dialog" data-backdrop="' + options.backdrop + '"' +
66-
' aria-labelledby="eventDetailsModal">' +
67-
' <div class="modal-dialog" role="document">' +
68-
' <div class="modal-content">' + options.modalContent +
69-
' <div class="modal-footer no-border">' + options.closeButtonTemplate +
70-
' <button type="button" id="confirm-btn" class=" btn ' + options.confirmBtnClass + '">' + options.confirmBtnText + '</button>' +
71-
' </div>' +
72-
' </div>' +
73-
' </div>' +
74-
' </div>';
75-
if (!$('body').hasClass('model-open')) {
76-
$('body').append(template);
77-
$('#simple-dialog-modal').modal('show');
78-
}
79-
}
66+
template = '<div class="modal fade window-t-xs-40" id="simple-dialog-modal-' + currentID + '" tabindex="-1" role="dialog" data-backdrop="' + options.backdrop + '"' +
67+
' aria-labelledby="eventDetailsModal">' +
68+
' <div class="modal-dialog" role="document">' +
69+
' <div class="modal-content">' + options.modalContent +
70+
' <div class="modal-footer no-border">' + options.closeButtonTemplate +
71+
' <button type="button" id="confirm-btn" class=" btn ' + options.confirmBtnClass + '">' + options.confirmBtnText + '</button>' +
72+
' </div>' +
73+
' </div>' +
74+
' </div>' +
75+
' </div>';
76+
if (!$('body').hasClass('model-open')) {
77+
$('body').append(template);
78+
$('#simple-dialog-modal-' + currentID).modal('show');
79+
}
80+
}
8081

81-
/**
82-
* Handling confirm button click event. If callback is available perform callback operation
83-
*/
84-
$(document).on('click', "#confirm-btn", function (event) {
85-
event.preventDefault();
86-
$('#simple-dialog-modal').modal('hide');
87-
if (typeof options.onSuccess === 'function' && options.onSuccess()) {
88-
options.onSuccess();
89-
}
90-
});
82+
/**
83+
* Handling confirm button click event. If callback is available perform callback operation
84+
*/
85+
$(document).on('click', "#confirm-btn", function (event) {
86+
event.preventDefault();
87+
$('#simple-dialog-modal-' + currentID).modal('hide');
88+
if (typeof options.onSuccess === 'function' && options.onSuccess()) {
89+
options.onSuccess();
90+
}
91+
});
9192

92-
/**
93-
* Handling close button events
94-
*/
95-
$(document).on('click', "#cancel-btn", function (event) {
96-
event.preventDefault();
97-
$('#simple-dialog-modal').modal('hide');
98-
if (typeof options.onCancel === 'function' && options.onCancel())
99-
options.onCancel();
100-
});
93+
/**
94+
* Handling close button events
95+
*/
96+
$(document).on('click', "#cancel-btn", function (event) {
97+
event.preventDefault();
98+
$('#simple-dialog-modal-' + currentID).modal('hide');
99+
if (typeof options.onCancel === 'function' && options.onCancel())
100+
options.onCancel();
101+
});
101102

102-
/**
103-
* removing appended modal from body and reset callback to null when modal become hidden
104-
*/
105-
$(document).on('hidden.bs.modal', '#simple-dialog-modal', function () {
106-
if (options.onSuccess)
107-
options.onSuccess = null;
108-
if (options.onCancel)
109-
options.onCancel = null;
110-
return $('#simple-dialog-modal').remove();
111-
});
103+
/**
104+
* removing appended modal from body and reset callback to null when modal become hidden
105+
*/
106+
$(document).on('hidden.bs.modal', '#simple-dialog-modal-' + currentID, function () {
107+
if (options.onSuccess)
108+
options.onSuccess = null;
109+
if (options.onCancel)
110+
options.onCancel = null;
111+
return $('#simple-dialog-modal-' + currentID).remove();
112+
});
113+
114+
/**
115+
* Validating options in simpleDaialog
116+
*/
117+
valdateOptions(function () {
118+
/**
119+
* Default options
120+
*/
121+
options = $.extend({
122+
title: 'Confirm',
123+
message: 'Do you want to continue?',
124+
modalContent: '<div class="modal-header bg-white">' +
125+
' <h4 class="modal-title capitalize-first-letter" id="exampleModalLabel">{title}</h4>' +
126+
' </div>' +
127+
' <div class="modal-body ">{message}' +
128+
' </div>',
129+
confirmBtnText: 'Okay',
130+
closeBtnText: 'close',
131+
confirmBtnClass: 'btn-primary',
132+
closeBtnClass: 'btn-default',
133+
backdrop: true,
134+
closeButton: true,
135+
closeButtonTemplate: '<button type="button" id ="cancel-btn" class="btn {closeBtnClass}">{closeBtnText}</button>',
136+
onSuccess: null,
137+
onCancel: null
138+
}, options);
139+
init();
140+
});
141+
};
112142

113-
/**
114-
* Validating options in simpleDaialog
115-
*/
116-
valdateOptions(function () {
117-
/**
118-
* Default options
119-
*/
120-
options = $.extend({
121-
title: 'Confirm',
122-
message: 'Do you want to continue?',
123-
modalContent: '<div class="modal-header bg-white">' +
124-
' <h4 class="modal-title capitalize-first-letter" id="exampleModalLabel">{title}</h4>' +
125-
' </div>' +
126-
' <div class="modal-body ">{message}' +
127-
' </div>',
128-
confirmBtnText: 'Okay',
129-
closeBtnText: 'close',
130-
confirmBtnClass: 'btn-primary',
131-
closeBtnClass: 'btn-default',
132-
backdrop: true,
133-
closeButton: true,
134-
closeButtonTemplate: '<button type="button" id ="cancel-btn" class="btn {closeBtnClass}">{closeBtnText}</button>',
135-
onSuccess: null,
136-
onCancel: null
137-
}, options);
138-
init();
139-
});
140-
};
141143

142144
/**
143145
* String replace function to replace variables with values in a string.

0 commit comments

Comments
 (0)