All Snippets
There are use cases where a lightbox may not be suitable for the job and its too heavy and slow. This snippets give you freedom to design custom popups using containers and open them on click of a button. Advantage of these popups are they don't take ages to load.
How to setup
create custom popup using a container
set a button to open the popup
create a button to close the popup
set the container to hidden
Form feature
If you have a Wix Form old or new version, you can provide the form id to close the popup on submission of the form. Eg. You create a newsletter form in the popup, once user submits the form, the popup closes.
Feel free to request more features on this snippet.
New to our site? Please see our quick tutorial on how to work with our snippets
Setting | Description |
|---|---|
containerId | element ID of the popup container |
buttonOpenId | element ID of the button that opens the popup |
buttonCloseId | [optional] element ID of the button to close the popup |
formId | [optional] if you want to close the popup on form submission, provide element ID of the form |
closeDelay | [optional] number of seconds to delay closing the form. Useful if there is a success or failure message on the form to show to the user. |
$w.onReady(function () {
PopupCustom({
containerId: '#box106',
buttonOpenId: '#button1',
buttonCloseId: '#button2',
})
PopupCustom({
containerId: '#box107',
buttonOpenId: '#button6',
buttonCloseId: '#button5',
})
PopupCustom({
containerId: '#box108',
buttonCloseId: '#button7',
openOnPageLoad: true
})
});
function PopupCustom({containerId:o,buttonOpenId:n=null,buttonCloseId:e=null,formId:t=null,closeDelay:i=0,openOnPageLoad:l=!1}){
if(!o)return;const u=$w(n),d=$w(e),s=$w(o),c=$w(t);let r="hide",m="show"
;if(s.collapsed&&(r="collapse",m="expand"),!s.id)return;l&&s.show()
;const a=()=>setTimeout((()=>s[r]()),1e3*i)
;if(u.id&&u.onClick((()=>s[m]())),d.id&&d.onClick((()=>s[r]())),c.id){
const o=c.onWixFormSubmitted||c.onSubmitSuccess,n=c.onWixFormSubmittedError||c.onSubmitFailure
;o(a),n(a)}}
Title
Title