dfelinger / purepopup Goto Github PK
View Code? Open in Web Editor NEWPure JavaScript library for alert messages, prompt and confirm dialogues with no dependences
Pure JavaScript library for alert messages, prompt and confirm dialogues with no dependences
I have code using this library which sometimes wants to make a new popup before the user has dealt with an existing one. As it exists currently, this is not possible without the library destroying the first popup in the process. What I wanted was to put the subsequent popups behind the earlier ones, using z-index, and I also decided to shift them slightly up and to the left. Here are the mods I made, in case they help anyone else out, or the maintainer wants to incorporate them.
First, at the end of the IIFE, I passed the Popup function itself to the window, since we're gonna want a 'new' one each time:
// REMOVE: window.PurePopup = new Popup();
window.Popup = Popup;
Then I made an object in my main code to hold a couple vars to keep track of the multiple popups (these could just as easily be standalone vars not in a object):
let State = { popup_num: 0, popups_open: 0 };
Then, in the creator Popup function, make this change:
// REMOVE: this.wrap.id = 'purePopupWrap';
State.popup_num++;
this.wrap.id = `purePopupWrap_${State.popup_num}`; // e.g. purePopupWrap_23
// each new popup will have lower z-index value so that is underneath the previous ones
this.wrap.style.zIndex = 999999 - State.popup_num;
Then I added this to the .show function:
// inner div was positioned with CSS; let's overwrite it so that we can offset the position
// of subsequent popups if they come while the first one is still open
State.popups_open++;
const margin_shift_vmin = (State.popups_open - 1) * 1.5; // use whatever spacing units and multiplier you want
const margin_left_vmin = (10 - margin_shift_vmin); // starts at 10vmin
const margin_top_vmin = (25 - margin_shift_vmin); // starts at 25vmin
const inner_div_el = this.wrap.firstChild;
inner_div_el.style.left = `${margin_left_vmin}vmin`;
inner_div_el.style.top = `${margin_top_vmin}vmin`;
And add this in the .close function (at the end of the setTimeout function):
// now that we can have multiple popups (instead of re-using one div), we should remove them...
document.body.removeChild(this.wrap);
// ...and keep track of how many are open so we can slightly offset them using a formula
State.popups_open--;
Now, whenever we want a new popup, we need two lines instead of one, since we need to do the 'new' ourself:
let PurePopup = new Popup();
PurePopup.alert({ title: 'Alert 1' });
And if you need to close it before the user does, do like so:
PurePopup.close();
Oh, and I almost forgot, I had to change the CSS now that we have a unique id for each new popup. This could have been done differently by using more classes instead of CSS that relied on a single id, but I learned something new that will probably come in handy in the future, and it made for less work in making this mod. Just change all the id selectors:
#purePopupWrap
...to attribute selectors (this was new to me):
[id^="purePopupWrap"]
This selects elements where the id starts with (^=) the string "purePopupWrap". Now we'll hit all the sequentially numbered ids of our popups.
Hope this helps someone not spend most of the day on this issue like I did. Or maybe someone wants to incorporate this into the library?
Cheers,
-knute
Hi there thanks for a great tool.
May I suggest a small improvement. I have changed prompt code so that first input element in prompt will receive focus automatically and scroll into view.
Popup.prototype.prompt = function (p, c) {
this.type = 'prompt';
this.setParams(p, c);
var inputsHtml = '', tabIndex = 0;
var first=true;
var firstId="";
for (var i in this.params.inputs){ inputsHtml += '<label for="purePopupInputs_'+i+'">'+this.params.inputs[i]+'</label><input id="purePopupInputs_'+i+'" name="'+i+'" type="text" tabindex="'+(tabIndex++)+'">';
if (first){
first=false;
firstId='purePopupInputs_'+i;
}
}
var buttonsHtml = '';
for (var i in this.params.buttons) buttonsHtml += '<span class="purePopupButton _'+i+'_">'+this.params.buttons[i]+'</span>';
this.wrap.innerHTML = '<div>'+
'<div>'+
'<div class="purePopupTitle">'+this.params.title+'</div>'+
inputsHtml+
buttonsHtml+
'</div>'+
'</div>';
this.show();
var textbox = document.getElementById(firstId);
textbox.focus();
textbox.scrollIntoView();
}
Hello,
First of all, it's a good work, very functional popup element. What I want to ask is that a dropdown or any other element can be added as input in prompt?
best regards,
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.