In this example the alert returns a Promise (async: true). When the modal is closed, the hiddenModal function resolves the Promise.
<script>
$(document).ready(function(){
function alertDemo(){
var title = 'Alert modal';
params = {
async: true,
id: 'alert-demo',
cssClass: 'alert-class',
message: $('#text-alert'),
buttons: [
{
close: true,
text: 'Close'
}
],
onHide: hiddenModal
};
return $.eModal
.alert(params, title)
.then(function(info){
console.info(info);
});
function hiddenModal(e){
var defer = $.eModal.defer();
defer.resolve('Alert modal is close.');
}
}
$('.open-alert').on('click', alertDemo);
});
</script>
In this example, the ajax.html file is loaded into the body element of the modal. The ajax.success property calls the greenifyText function, which colors the text green.
<script>
$(document).ready(function(){
function ajaxDemo(){
var title = 'Ajax modal';
params = {
async: true,
ajax: {
url: 'ajax.html?_uid' + Math.random(),
success: greenifyText
},
buttons: [
{
close: true,
text: 'Close'
}
],
onHide: hiddenModal
};
return $.eModal
.ajax(params, title)
.then(function(html){
console.info('Ajax modal is visible.');
});
function hiddenModal(e){
console.info('Ajax modal is close.');
}
function greenifyText(html){
console.info('Now the text is green.');
return $(html).find('p')
.css('color', 'green')
.end()
.get(0).outerHTML;
}
}
$('.open-ajax').on('click', ajaxDemo);
});
</script>
In this example I set the button labels 'OK' and 'Cancel' to 'Accept' and 'Dismiss' by calling the label method. The 'Accept' button is colored green through the btn-success Bootstrap class. When I click on 'Accept' I write 'Ok' in the console; instead when I click on 'Dismiss' I write 'Ko' in the console.
<script>
$(document).ready(function(){
function confirmDemo(){
params = {
title: 'Confirm modal',
message: 'You welcome! Want clean code?',
confirm: {
label: 'Accept',
style: [
'btn-success',
'btn-danger'
]
},
onHide: hiddenModal
return $.eModal
.label('Accept', 'Dismiss')
.confirm(params)
.then(function(){
console.info('Ok');
}, function(){
console.info('Ko');
});
function hiddenModal(e){
console.info('Confirm modal is close.');
}
}
$('.open-confirm').on('click', confirmDemo);
});
</script>
In this example the prompt form asks what the result of 2 plus 2 is. If the answer is correct, I write in the console '4 is the right value'; otherwise if the answer is wrong, 'X is not the right value'. The form field is of type 'number' (prompt.type) and is mandatory (prompt.required). The default value is '3' (prompt.value).
<script>
$(document).ready(function(){
function promptDemo(){
params = {
title: 'Prompt modal',
message: 'You welcome! What is 2 plus 2?',
prompt: {
label: 'Send',
required: true,
type: 'number',
value: '3'
},
onHide: hiddenModal
};
return $.eModal
.label('Send', 'Cancel')
.prompt(params)
.then(function(val){
if(val == 4){
console.log(val + ' is the right answer');
} else{
console.log(val + ' is not the right answer');
}
}, function(){
console.info('No value entered.');
});
function hiddenModal(e){
console.info('Prompt modal is close.');
}
}
$('.open-prompt').on('click', promptDemo);
});
</script>
This example opens a YouTube video in an iframe. Through the object iframe .attributes set the attributes of the IFRAME tag. The useBin property activates the recycle bin, where the video will be saved waiting to be recalled. This way the video will not be reloaded again. It is mandatory to set an ID for the item saved in the bin (binId).
<script>
$(document).ready(function(){
function youtubeDemo(){
var title = 'Youtube embed modal';
params = {
async: true,
iframe: {
url: 'https://www.youtube.com/embed/s8Iar_t7CW4',
attributes: {
'id': 'youtube',
'allow': 'autoplay; encrypted-media',
'allowfullscreen': true
}
},
buttons: [
{
close: true,
text: 'Close'
}
],
onHide: hiddenModal,
useBin: true,
binId: 'youtube-demo'
};
return $.eModal
.embed(params, title)
.then(function(html){
console.info('Video is visible.');
});
function hiddenModal(e){
console.info('Video is close.');
}
}
$('.open-youtube').on('click', youtubeDemo);
});
</script>
This example loads a page within the IFRAME. Through the properties width, height and position are set the height, the width and the horizontal and vertical position of the modal with respect to the browser window.
<script>
$(document).ready(function(){
function iframeDemo(){
var title = 'Iframe modal';
params = {
async: true,
iframe: {
url: 'https://www.reloadlab.it/'
},
width: '60%',
height: '60%',
position: ['middle', 'center'],
onHide: hiddenModal,
useBin: true,
binId: 'iframe-demo',
overlayClose: false
};
return $.eModal
.iframe(params, title)
.then(function(html){
console.info('Iframe is visible.');
});
function hiddenModal(e){
console.info('Iframe is close.');
}
}
$('.open-iframe').on('click', iframeDemo);
});
</script>
This example loads a Gmap map into the IFRAME. The width of the modal is set through the size properties.
<script>
$(document).ready(function(){
function gmapDemo(){
var title = 'Gmap embed modal';
params = {
async: true,
iframe: {
url: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2968.74185604113!2d12.510330315442406!3d41.91990777921887!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f616bfdd075cd%3A0x9c0d155c61911b7!2sVia%20Rovereto%2C%207%2C%2000198%20Roma%20RM!5e0!3m2!1sit!2sit!4v1642872512358!5m2!1sit!2sit',
attributes: {
'id': 'gmap'
}
},
buttons: [
{
close: true,
text: 'Close'
}
],
onHide: hiddenModal,
useBin: true,
binId: 'gmap-demo',
size: 'xl'
};
return $.eModal
.embed(params, title)
.then(function(html){
console.info('Gmap is visible.');
});
function hiddenModal(e){
console.info('Gmap is close.');
}
}
$('.open-gmap').on('click', gmapDemo);
});
</script>