I've been working on an ASP.net project that uses custom 'modal dialogs'. I use scare quotes here because I understand that the 'modal dialog' is simply a div in my html document that is set to appear "on top" of the rest of the document and is not a modal dialog in the true sense of the word.
In many parts of the web site, I have code that looks like this:
var warning = 'Are you sure you want to do this?';
if (confirm(warning)) {
// Do something
}
else {
// Do something else
}
This is okay, but it would be nice to make the confirm dialog match the style of the rest of the page.
However, since it is not a true modal dialog, I think that I need to write something like this: (I use jQuery-UI in this example)
<div id='modal_dialog'>
<div class='title'>
</div>
<input type='button' value='yes' id='btnYes' />
<input type='button' value='no' id='btnNo' />
</div>
<script>
function DoSomethingDangerous() {
var warning = 'Are you sure you want to do this?';
$('.title').html(warning);
var dialog = $('#modal_dialog').dialog();
function Yes() {
dialog.dialog('close');
// Do something
}
function No() {
dialog.dialog('close');
// Do something else
}
$('#btnYes').click(Yes);
$('#btnNo').click(No);
}
Is this a good way to accomplish what I want, or is there a better way?
You might want to consider abstracting it out into a function like this:
function dialog(message, yesCallback, noCallback) {
$('.title').html(message);
var dialog = $('#modal_dialog').dialog();
$('#btnYes').click(function() {
dialog.dialog('close');
yesCallback();
});
$('#btnNo').click(function() {
dialog.dialog('close');
noCallback();
});
}
You can then use it like this:
dialog('Are you sure you want to do this?',
function() {
// Do something
},
function() {
// Do something else
}
);
SweetAlert
You should take a look at SweetAlert as an option to save some work. It's beautiful from the default state and is highly customizable.
Confirm Example
sweetAlert(
{
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!"
},
deleteIt()
);
To enable you to use the confirm box like the normal confirm dialog, I would use Promises which will enable you to await on the result of the outcome and then act on this, rather than having to use callbacks.
This will allow you to follow the same pattern you have in other parts of your code with code such as...
const confirm = await ui.confirm('Are you sure you want to do this?');
if(confirm){
alert('yes clicked');
} else{
alert('no clicked');
}
See codepen for example, or run the snippet below.
https://codepen.io/larnott/pen/rNNQoNp
const ui = {
confirm: async (message) => createConfirm(message)
}
const createConfirm = (message) => {
return new Promise((complete, failed)=>{
$('#confirmMessage').text(message)
$('#confirmYes').off('click');
$('#confirmNo').off('click');
$('#confirmYes').on('click', ()=> { $('.confirm').hide(); complete(true); });
$('#confirmNo').on('click', ()=> { $('.confirm').hide(); complete(false); });
$('.confirm').show();
});
}
const saveForm = async () => {
const confirm = await ui.confirm('Are you sure you want to do this?');
if(confirm){
alert('yes clicked');
} else{
alert('no clicked');
}
}
body {
margin: 0px;
font-family: "Arial";
}
.example {
padding: 20px;
}
input[type=button] {
padding: 5px 10px;
margin: 10px 5px;
border-radius: 5px;
cursor: pointer;
background: #ddd;
border: 1px solid #ccc;
}
input[type=button]:hover {
background: #ccc;
}
.confirm {
display: none;
}
.confirm > div:first-of-type {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0px;
left: 0px;
}
.confirm > div:last-of-type {
padding: 10px 20px;
background: white;
position: absolute;
width: auto;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
border: 1px solid #333;
}
.confirm > div:last-of-type div:first-of-type {
min-width: 150px;
padding: 10px;
}
.confirm > div:last-of-type div:last-of-type {
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
<input type="button" onclick="saveForm()" value="Save" />
</div>
<!-- Hidden confirm markup somewhere at the bottom of page -->
<div class="confirm">
<div></div>
<div>
<div id="confirmMessage"></div>
<div>
<input id="confirmYes" type="button" value="Yes" />
<input id="confirmNo" type="button" value="No" />
</div>
</div>
</div>
I would use the example given on jQuery UI's site as a template:
$( "#modal_dialog" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
var confirmBox = '<div class="modal fade confirm-modal">' +
'<div class="modal-dialog modal-sm" role="document">' +
'<div class="modal-content">' +
'<button type="button" class="close m-4 c-pointer" data-dismiss="modal" aria-label="Close">' +
'<span aria-hidden="true">×</span>' +
'</button>' +
'<div class="modal-body pb-5"></div>' +
'<div class="modal-footer pt-3 pb-3">' +
'OK' +
'<button type="button" class="btn btn-secondary abortBtn btn-sm" data-dismiss="modal">Abbrechen</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
var dialog = function(el, text, trueCallback, abortCallback) {
el.click(function(e) {
var thisConfirm = $(confirmBox).clone();
thisConfirm.find('.modal-body').text(text);
e.preventDefault();
$('body').append(thisConfirm);
$(thisConfirm).modal('show');
if (abortCallback) {
$(thisConfirm).find('.abortBtn').click(function(e) {
e.preventDefault();
abortCallback();
$(thisConfirm).modal('hide');
});
}
if (trueCallback) {
$(thisConfirm).find('.yesBtn').click(function(e) {
e.preventDefault();
trueCallback();
$(thisConfirm).modal('hide');
});
} else {
if (el.prop('nodeName') == 'A') {
$(thisConfirm).find('.yesBtn').attr('href', el.attr('href'));
}
if (el.attr('type') == 'submit') {
$(thisConfirm).find('.yesBtn').click(function(e) {
e.preventDefault();
el.off().click();
});
}
}
$(thisConfirm).on('hidden.bs.modal', function(e) {
$(this).remove();
});
});
}
// custom confirm
$(function() {
$('[data-confirm]').each(function() {
dialog($(this), $(this).attr('data-confirm'));
});
dialog($('#customCallback'), "dialog with custom callback", function() {
alert("hi there");
});
});
.test {
display:block;
padding: 5p 10px;
background:orange;
color:white;
border-radius:4px;
margin:0;
border:0;
width:150px;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
example 1
<a class="test" href="http://example" data-confirm="do you want really leave the website?">leave website</a><br><br>
example 2
<form action="">
<button class="test" type="submit" data-confirm="send form to delete some files?">delete some files</button>
</form><br><br>
example 3
<span class="test" id="customCallback">with callback</span>
One other way would be using colorbox
function createConfirm(message, okHandler) {
var confirm = '<p id="confirmMessage">'+message+'</p><div class="clearfix dropbig">'+
'<input type="button" id="confirmYes" class="alignleft ui-button ui-widget ui-state-default" value="Yes" />' +
'<input type="button" id="confirmNo" class="ui-button ui-widget ui-state-default" value="No" /></div>';
$.fn.colorbox({html:confirm,
onComplete: function(){
$("#confirmYes").click(function(){
okHandler();
$.fn.colorbox.close();
});
$("#confirmNo").click(function(){
$.fn.colorbox.close();
});
}});
}
Faced with the same problem, I was able to solve it using only vanilla JS, but in an ugly way. To be more accurate, in a non-procedural way. I removed all my function parameters and return values and replaced them with global variables, and now the functions only serve as containers for lines of code - they're no longer logical units.
In my case, I also had the added complication of needing many confirmations (as a parser works through a text). My solution was to put everything up to the first confirmation in a JS function that ends by painting my custom popup on the screen, and then terminating.
Then the buttons in my popup call another function that uses the answer and then continues working (parsing) as usual up to the next confirmation, when it again paints the screen and then terminates. This second function is called as often as needed.
Both functions also recognize when the work is done - they do a little cleanup and then finish for good. The result is that I have complete control of the popups; the price I paid is in elegance.
I managed to find the solution that will allow you to do this using default confirm() with minimum of changes if you have a lot of confirm() actions through out you code. This example uses jQuery and Bootstrap but the same thing can be accomplished using other libraries as well. You can just copy paste this and it should work right away
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Custom Confirm</h1>
<button id="action"> Action </button>
<button class='another-one'> Another </button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
document.body.innerHTML += `<div class="modal fade" style="top:20vh" id="customDialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id='dialog-cancel' class="btn btn-secondary">Cancel</button>
<button type="button" id='dialog-ok' class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>`;
function showModal(text) {
$('#customDialog .modal-body').html(text);
$('#customDialog').modal('show');
}
function startInterval(element) {
interval = setInterval(function(){
if ( window.isConfirmed != null ) {
window.confirm = function() {
return window.isConfirmed;
}
elConfrimInit.trigger('click');
clearInterval(interval);
window.isConfirmed = null;
window.confirm = function(text) {
showModal(text);
startInterval();
}
}
}, 500);
}
window.isConfirmed = null;
window.confirm = function(text,elem = null) {
elConfrimInit = elem;
showModal(text);
startInterval();
}
$(document).on('click','#dialog-ok', function(){
isConfirmed = true;
$('#customDialog').modal('hide');
});
$(document).on('click','#dialog-cancel', function(){
isConfirmed = false;
$('#customDialog').modal('hide');
});
$('#action').on('click', function(e) {
if ( confirm('Are you sure?',$(this)) ) {
alert('confrmed');
}
else {
alert('not confimed');
}
});
$('.another-one').on('click', function(e) {
if ( confirm('Are really, really, really sure ? you sure?',$(this)) ) {
alert('confirmed');
}
else {
alert('not confimed');
}
});
</script>
</body>
</html>
This is the whole example. After you implement it you will be able to use it like this:
if ( confirm('Are you sure?',$(this)) )
I created a js file with below given code and named it newconfirm.js
function confirm(q,yes){
var elem='<div class="modal fade" id="confirmmodal" role="dialog" style="z-index: 1500;">';
elem+='<div class="modal-dialog" style="width: 25vw;">';
elem+='<div class="modal-content">';
elem+='<div class="modal-header" style="padding:8px;background-color:lavender;">';
elem+='<button type="button" class="close" data-dismiss="modal">×</button>';
elem+='<h3 class="modal-title" style="color:black;">Message</h3></div>';
elem+='<div class="modal-body col-xs-12" style="padding:;background-color: ghostwhite;height:auto;">';
elem+='<div class="col-xs-3 pull-left" style="margin-top: 0px;">';
elem+='<img class="img-rounded" src="msgimage.jpg" style="width: 49%;object-fit: contain;" /></div><div class="col-xs-9 pull-left "><p class="aconfdiv"></p></div></div>';
elem+='<div class="modal-footer col-xs-12" style="padding:6px;background-color:lavender;"><div class="btn btn-sm btn-success yes pull-left">Yes</div><button type="button" class="btn btn-default btn-sm" data-dismiss="modal">No</button></div></div></div></div>';
$('body').append(elem);
$('body').append('<div class="lead cresp"></div>');
$('.aconfdiv').html(q);
$('#confirmmodal').modal('show');
$('.yes').on('click',function(){
$('body').find('.cresp').html('Yes');
$('#confirmmodal').modal('hide');
yes();
})
}
and in my main php file calling confirm in the javascript like this
$('.cnf').off().on('click',function(){
confirm("Do you want to save the data to Database?<br />Kindly check the data properly as You cannot undo this action",function(){
var resp=$('body').find('.cresp').html();
$('body').find('.cresp').remove();
if(resp=='Yes'){
alert("You clicked on Yes Bro.....")
}
});
})
Related
I have an alert that shows under some conditions. I want the alert to contain a link and execute some code when that link is clicked. However, I'm getting error "ReferenceError: doTheThing is not defined".
function doTheThing() {
document.getElementById("thing").innerHTML = "Done.";
};
var alert = '<div class="alert alert-warning alert-dismissible fade show"
role="alert"><button type="button" class="close" data-dismiss="alert"
aria-label="Close"><span aria-hidden="true">×</span></button>Please
submit your wallet address or <span class="btn-link"
id=btn-donate onclick="doTheThing()">click here to donate your winnings.</span></div>';
var alertHTML = $(alert);
document.getElementById("placeholder").innerHTML = alert;
and html;
<div id=placeholder></div>
<div id=thing></div>
I assume: you defined the function in the dom ready context. If so, move the function outside.
function doTheThing() {
document.getElementById("thing").innerHTML = "Done.";
};
$(function () {
var alert = '<div class="alert alert-warning alert-dismissible fade show"\
role="alert"><button type="button" class="close" data-dismiss="alert"\
aria-label="Close"><span aria-hidden="true">×</span></button>Please\
submit your wallet address or <span class="btn-link"\
id=btn-donate onclick="doTheThing()">click here to donate your winnings.</span></div>';
var alertHTML = $(alert);
document.getElementById("placeholder").innerHTML = alert;
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >
<div id=placeholder></div>
<div id=thing></div>
In your provided example change following settings:
As Renan Souza sad, it has to be included inside its own file.
This code works fine:
function doTheThing() {
document.getElementById("thing").innerHTML = "Done.";
};
var alert = `<div class="alert alert-warning alert-dismissible fade show"
role="alert"><button type="button" class="close" data-dismiss="alert"
aria-label="Close"><span aria-hidden="true">×</span></button>Please
submit your wallet address or <span class="btn-link"
id=btn-donate onclick="doTheThing()">click here to donate your winnings.</span></div>`;
var alertHTML = $(alert);
document.getElementById("placeholder").innerHTML = alert;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='placeholder'>
</div>
<div id='thing'>
</div>
I am trying to step away from jsTree as this is not as much as configurable as having my own custom code. I am making use of Bootstrap to have a somewhat similar functionality as jsTree. I am also stepping away from jQuery (for now), because of debugging reasons.
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: 100%;
margin-left: 15px;
}
.flex {
display: flex;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--The generated html as example: -->
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
JSFiddle
I added a border in a .column-*-1 to allow for some spacing for the border:
The spacing however, I find a bit too much. How could I address this problem? I would like to refrain from styling Bootstrap's grid system (meaning I preferably would not want to touch any styling behind .col-* and .row classes etc.) because this might break the responsiveness or anything else related to Bootstrap.
Edit:
I also noticed that when adding a lot of buttons by just clicking them, the layout of tree will start failing as well. (I am aware this is a different question, so if I need to post another question regarding this problem, please do let me know) Is there a way I could address this so that the element works correctly?
Add this little CSS
#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
content: ' ';
position: absolute;
left: calc(-100% / 11 + 30px);
top: 2em;
border-top: 1px dashed #000000;
width: calc(100% / 5 - 15px);
}
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: 100%;
margin-left: 15px;
}
.flex {
display: flex;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
content: ' ';
position: absolute;
left: calc(-100% / 11 + 30px);
top: 2em;
border-top: 1px dashed #000000;
width: calc(100% / 5 - 15px);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--The generated html as example: -->
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
Here I have used absolute positioning and increased height by 5px which kind of makes it touches the next div element.
Here is the Fiddle Link
and the Code Snippet:
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: calc(100% + 5px);
margin-left: 20px;
position: absolute;
}
.flex {
position: relative;
display: flex;
}
.col-xs-11 .col-xs-12 {
padding-left: 0;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
I'm working on a VERY LIGHT survey application. This application runs in third world countries in locations with very limited connection.
We found that the loading-time is proportional to user Engagement (Very important to us).
Today I'm using 2 libs - VueJS and a custom bootstrap build. I would like to invoke a modal. But the modal requires to add the Bootstrap Javascript and the jQuery. those libs almost doubles the loading time.
How can I open a modal without adding those two libs?
#uday's link to CSS only modal is a nice trick, but might be awkward to use if you use #tag's for other purposes (eg, Routing & param passing).
So here is an example that uses very little JS to achieve something very similar. I've tried to keep the Snippet as small as possible so that it's easy to see what's happening.
var modal = document.querySelector(".modal");
var container = modal.querySelector(".container");
document.querySelector("button").addEventListener("click", function (e) {
modal.classList.remove("hidden")
});
document.querySelector(".modal").addEventListener("click", function (e) {
if (e.target !== modal && e.target !== container) return;
modal.classList.add("hidden");
});
.modal {
background-color: rgba(0,0,0,0.4); /* Transparent dimmed overlay */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table;
}
.modal.hidden {
display: none;
}
.modal .container {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
}
.modal .body {
box-shadow: 5px 10px #888888;
display: inline-block;
background-color: white;
border: 1px solid black;
padding: 10px;
}
<button>Show Modal</button>
<div class="modal hidden">
<div class="container">
<div class="body">
<p>Click outside this box to close the modal.<p>
<p>You could of course add a close button etc</p>
<p>But this is left for the OP todo</p>
</div>
</div>
</div>
You don't need any css style. You should create the bootstrap modal in your HTML, then in your js, you have to simply give it some style according to the following description:
var locModal = document.getElementById('locModal');
var btnclose = document.getElementById('w-change-close');
var btnShow= document.getElementById('w-change-location');
//show the modal
btnShow.addEventListener('click', (e) => {
locModal.style.display = "block";
locModal.style.paddingRight = "17px";
locModal.className="modal fade show";
});
//hide the modal
btnclose.addEventListener('click', (e) => {
locModal.style.display = "none";
locModal.className="modal fade";
});
The HTML should be like this:
<!-- Button trigger modal -->
<button id="w-change-location" type="button" class="btn btn-primary mt-3" data-toggle="modal" data-target="#locModal">
Change Location
</button>
<!-- Modal -->
<div class="modal fade" id="locModal" tabindex="-1" role="dialog" aria-labelledby="locModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="locModalLabel">Choose Location</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" id="w-form">
<div class="form-group">
<label for="city"> City</label>
<input type="text" class="form-control" id="city">
</div>
<div class="form-group">
<label for="state"> State </label>
<input type="text" class="form-control" id="state">
</div>
</form>
</div>
<div class="modal-footer">
<button id="w-change-close" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="w-change-btn" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
We write private code for our modal.
let modal = document.getElementById('our-modal');
let modalContentElm = modal.querySelector('.modal-content');
let allModalButtons = modal.querySelectorAll('.modal-footer > .btn');
let outerClick = true;
let openStyle = () => { //MODAL SHOW
modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
modal.style.display = 'block';
setTimeout(() => { modal.style.opacity = 1; }); //FOR TRANSITION
};
let closeStyle = () => { //MODAL HIDE
modal.style.display = 'none';
modal.style.opacity = 0;
};
//NO CLOSE MODAL WHEN YOU CLICK INSIDE MODAL
modalContentElm.onclick = () => {
outerClick = false;
};
//CLOSE MODAL WHEN YOU CLICK OUTSIDE MODAL
modal.onclick = () => {
if(outerClick){ closeStyle(); }
outerClick = true;
};
for(let btn of allModalButtons){
btn.onclick = () => {
closeStyle();
if(btn.getAttribute('id') === 'success-btn'){
//PLEASE WRITE 'success-btn' IN THE ID VALUE OF THE CONFIRM BUTTON
console.log('Click Yes');
}
else{
console.log('Click Cancel');
}
//..... more else if or else for more modal buttons
};
}
Whenever we want to open modal
openStyle();
Whenever we want to close modal on manuel
closeStyle();
It's a bit laborious, but it works. A more general class can be written.
If you are using bootstrap 5, you can easily show and hide modal with js:
Documentation
const myModal = new bootstrap.Modal(document.getElementById('myModal')); // creating modal object
myModal.show(); // show modal
myModal.hide(); // hide modal
If you open the modal using a button. you can add the bootstrap options to that button data-bs-toggle="modal" data-bs-target="#modalTarget" and also a onclick function like onclick="whenOpenModal();"
function whenOpenModal(){
console.log("modal opened");
}
I want to add a fadeIn() and a fadeOut() to my scrollToTop but the fadeIn is'nt worked.
If you want ot see, I've created some GIF : First GIF Here
Seconde GIF
As you can see the fadeIn() on the scrollToTop button is
triggered by the scroll of the windows,
This is my code :
$(document).ready(function() {
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
I'm not an expert at jQuery, but it looks to me as though your problem resides in you invoking fadeIn nearly every time the page is scrolled. What I suggest is that you create a boolean, called buttonShowing (or whatever), and set it to false.
Then, change buttonShowing every time the user scrolls, at the end of the appropriate if and else statements. Then, at the beginning of the if/else statements, you can check if the buttonShowing state has changed and only fadeIn/Out if the state has changed since the last scroll event fired. Here is the code:
$(document).ready(function() {
var buttonShowing = false;
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
if(!buttonShowing) $(".scrollToTop").fadeIn(1000);
buttonShowing = true;
} else {
if(buttonShowing) $('.scrollToTop').fadeOut(1000);
buttonShowing = false;
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
This example may help you. :
<html>
<head>
<style>
body {
height: 1200px;
}
div {
width: 50px;
height: 50px;
background-color: red;
border-radius: 100%;
position: fixed;
display: none;
}
</style>
</head>
<body>
<div id="cir"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(window).scroll(function(){
if($(document).scrollTop()>100)
$("#cir").fadeIn(1000);
else
$("#cir").fadeOut(800);
})
</script>
</body>
</html>
Best Solution for you:
$(window).scroll(function() {
var scroll_pos = window.pageYOffset;
var scroll_div = $('.modal-content').offset().top;
if(scroll_pos > scroll_div) {
if ($(this).scrollTop() > 100)
$(".scrollToTop").fadeIn(1000);
else
$('.scrollToTop').fadeOut(1000);
}
});
or Change $('.modal-content').scroll(function() { to $(window).scroll(function() {. See:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
The solution with $(window).scroll(function() doesn't work, certainly beacause this script is used on a modal.
This is an of my HTML code with the modal :
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<!-- My content -->
<h4>Ajouter une recette</h4>
<div class="row">
<div class="input-field col s6 offset-s3">
<input id="libelle" type="text" class="validate">
<label for="libelle">Nom de la recette</label>
</div>
</div>
<form id="form_ingredient">
<div class="row">
<div class="col s4 offset-s1 input-field">
<input id="ingredient" name="ingredient" type="text" class="validate">
<label for="ingredient">Ingredient</label>
</div>
<div class="col s4 offset-s2 input-field">
<input id="poid" name="poid" type="number" class="validate">
<label for="poid">Poid</label>
</div>
</div>
</form>
</div>
<div class="modal-footer" style="text-align: right;">
<!-- My footer -->
<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a id="add_ing"><i class="fa fa-plus" aria-hidden="true"></i></a>
<a id="valid_ing" style="margin-left: 1.5%;"><i class="fa fa-check" aria-hidden="true"></i></a>
</div>
</div>
<script>
//The script that I try to use
</script>
I resolved my problem with Css, I just add these class to my stylesheet :
.scrollToTop{
opacity:0;
text-decoration: none;
transition:opacity 1s ease-in;
float: left; }
.scrollToTop.visible {
opacity:1; }
And this Js and that works :
$('.modal-content').scroll(function(){
if ($(this).scrollTop() > 100) {
$(".scrollToTop").addClass('visible').css("cursor", "pointer");
} else {
$('.scrollToTop').removeClass('visible').css("cursor", "default");
}
});
I'm using Bootstrap v 3.0.0. I've following HTML code of Bootstrap Modal:
<div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Submit Form</h4>
</div>
<div class="modal-body" style="max-height: 300px; overflow-y: auto;">
<br/>
<!-- The form is placed inside the body of modal -->
<form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action="">
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg ID <span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="reg_id" id="reg_id"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg Date<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control date_control" id="reg_date" name="reg_date" value="" placeholder="yyyy-mm-dd">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Upload Image<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="file" name="reg_image" id="reg_image" accept="image/*" capture="camera" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-5">
<button type="submit" class="btn btn-success" id="btn_receipt_submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
For above bootstrap modal I've written following AJAX-jQuery code :
$('#request_form').submit(function(e) {
var form = $(this);
var formdata = false;
var reg_id = $('#reg_id').val();
var reg_date = $('#reg_date').val();
if(window.FormData) {
formdata = new FormData(form[0]);
}
var formAction = form.attr('action');
$.ajax({
url : 'xyz.php',
type : 'POST',
cache : false,
data : formdata ? formdata : form.serialize(),
contentType : false,
processData : false,
beforeSend: function() {
$(".btn").prop('disabled', true); // disable both the buttons on modal
},
success: function(response) {
$(".btn").prop('disabled', false); // enable both the buttons on modal
var responseObject = $.parseJSON(response);
if(responseObject.error_message) {
if ($(".alert-dismissible")[0]) {
$('.alert-dismissible').remove();
}
var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>"+responseObject.error_message+"</div>";
$(htmlString).insertBefore('div.modal-body #request_form');
} else {
$('#newModal').modal('hide');
$('#Modal2').modal('show');
}
}
});
e.preventDefault();
});
I want to show some appropriate loader image exactly at the the center of the screen along with the message "Your request is processing...please wait" when the AJAX request goes to PHP file and it should be displayed exactly at the center of the screen until the response from PHP file comes.
Also during this time user should not be able to close the modal, nor it should get hidden if user clicks anywhere apart from the modal. In other words, until the response from PHP file comes user should not be able to do anything.
I tried many tricks but I'm only able to disable the two buttons appearing on form until the response comes. But actually I want to do much more than this.
Here is what you could do:
Use css to create a spinning icon
As for the positioning of the icon and message do the following:
create div that covers the whole page
set the z-index to a high value, higher than that of modal
use css to center content in the div
the div should initially be hidden
when the submit event fires the div is made visible which then disables any user action
Use the following JavaScript:
The JavaScript:
$(function() {
var mod1 = $('#newModal'),
mod2 = $('#modal2'),
btn = $('.open-form'),
ldg = $('#loading');
mod1.add(mod2).modal({show: false});
btn.on('click', function() {
mod1.modal( 'show' );
});
$('#request_form').submit(function(e) {
e.preventDefault();
ldg.find('> div > span').text('Please wait as your file is uploaded')
.end().show();
var form = $(this);
var formdata = false;
var reg_id = $('#reg_id').val();
var reg_date = $('#reg_date').val();
if(window.FormData) {
formdata = new FormData(form[0]);
}
var formAction = form.attr('action');
$.ajax({
url : formAction,
type : 'POST',
cache : false,
data : formdata ? formdata : form.serialize(),
contentType : false,
processData : false,
success: function(response) {
ldg.hide();
var responseObject = $.parseJSON(response);
if(responseObject.error_message) {
if ($(".alert-dismissible")[0]) {
$('.alert-dismissible').remove();
}
var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>"+responseObject.error_message+"</div>";
$(htmlString).insertBefore('div.modal-body #request_form');
} else {
$('#newModal').modal('hide');
$('#Modal2').modal('show');
}
}
});
});
});
The Demo:
DEMO
http://jsfiddle.net/cnvusn04/2/
CSS:
.modal {
text-align: center;
}
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
JQ:
$('#myModal').modal({
show:false,
})
// prevents closure while the ajax call is in progress
$('#myModal').on('hide.bs.modal', function (e) {
if(inProgess == true)
return false;
})
var inProgess = false;
ajaxCall();
function ajaxCall()
{
inProgess = true;
$('#myModal').modal('show');
//simulates the ajax call
setTimeout(function(){
inProgess = false;
$('#myModal').modal('hide');
}, 5000);
}
Notice that i expect that your question should be close cause it is "too broad".
You can try to disable the mouse event on the modal:
$(".modal").css('pointer-events','none');
See also: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
The above does not disable the button (used to open the modal), but you can keep your first solution. Also notice that you will have to set the modal's keyboard option false to pevent closing with the escape key.
Alternatively you code set a overlay with a higher z-index than the modal
CSS:
html, body{
height:100%;
}
#disableall{
position: absolute;
width: 100%;
height:100%;
z-index:1050;
background-color: rgba(255,0,0,0.5);
display:none;
}
html directly after the <body> tag:
<div id="disableall"></div>
javascript:
beforeSend: function() {
$("disableall").show();
},
it worked for me try like this
css
#pageloaddiv {
position: fixed;
margin: 0px;
width: 100%;
height: 100%;
z-index: 100000;
background: url('../img/ajax-loader.gif') no-repeat center center rgba(0, 0, 0, 0.38);
}
html
<div id="pageloaddiv" style="display: none;"></div>
javascript
$.ajax({
url: 'your url',
beforeSend:function(){
$('#pageloaddiv').show();
},
success: function() {
$('#pageloaddiv').hide();
$('#newModal').hide();
},
});
is there anything wrong with using something like font awesome icons that are animated
<i class="fa fa-spin fa-3x"></i>
the above then might do the trick for you