JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/css/bootstrap-dialog.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
JavaScript
function popupOnAPopup() {
BootstrapDialog.show({
title: 'Yo DAWG! A popup on your popup',
message: function(dialog) {
return $('<div>I heard you like that</div>');
},
draggable: true,
buttons: [
{
label: 'Close',
cssClass: 'btn btn-default btn-sm',
action: function(dialogItself){
dialogItself.close();
}
},
],
onshow: function(dialog){
dialog.$modal.css('visibility', 'hidden');
},
onshown: function(dialog){
setTimeout(function() {
var tier = $('.bootstrap-dialog').length - 1;
dialog.$modal.prev(".modal-backdrop")
.css("z-index", 1030 + tier * 30);
dialog.$modal
.css("z-index", 50000 + tier * 30);
dialog.$modal.css('visibility', 'visible');
}, 100);
},
});
}
$(function() {
BootstrapDialog.show({
title: 'Popups are great',
message: function(dialog) {
return $('<div>Popups are great. Lets use them for everything. <a href="#" onClick="popupOnAPopup();">Add a popup on your popup</a></div>');
},
buttons: [
{
label: 'Close',
cssClass: 'btn btn-default btn-sm',
action: function(dialogItself){
dialogItself.close();
}
},
],
});
});