Develop Reference

Made successive wix lightbox modal

I try to made a terms and condition modal next to my register form on my wix website.
enter image description here
I have two custom dialogs #lightbox1 & #lightbox2. After user clicks REGISTER NOW (#button2) on #lightbox1 another custom popup dialog (#lightbox2) with some text and OK button should be shown. After user clicks ACCEPTER on this popup, the register should be confirmed.
That is the code i added :
$w.onReady(() => {
$w('#button2').on('click', function () {
$w("#lightbox2").show();
});
});
The problem is not recognize #lightbox2 and it throws me error :
"An element with the ID '#lightbox2' does not exist on this page. Select another element and view or edit its ID in the Properties & Events panel."
enter image description here
enter image description here
Then, if a charitable soul wants to help me, I'll welcome him with open arms 😂.

Wix only allows one lightbox at a time to function, as an alternative approach you can add Wix Multi-State component inside the lightbox popup and switch the views with the help of code
Wix Velo Tutorial for Multi-State Boxes

Change jQuery click event (this)

I dont know a lot about js and jQuery. I bought a WP theme and I want to do a few changes on it.
In this page: https://websitesdevs.com/search-services/
You can see a div with a text saying "Apply Filters" and when you click on it, it opens a popup with all the filters. The thing is that I want a search box, and then a button to open this popup with the filters.. I've been trying it but I can't do it.. I would like to open that popup with any other CSS class. Do you know how can I do it?
I think that the popup opens with this JS & jQuery script
//filter dropdown
jQuery('.mmobile-floating-apply,.wt-mobile-close').on('click', function() {
var _this = jQuery(this);
_this.parents('aside.wt-sidebar').toggleClass('show-mobile-filter');
});
This code is located at workreap_callbacks.js
Thanks for your time, I really need this

As far as I understand your question, you can run this:
$('.mmobile-floating-apply,.wt-mobile-close')
.parents('aside.wt-sidebar')
.toggleClass('show-mobile-filter');
from any place in your code.

Semantic-ui modal duplicated with VueJS

I found 2 similar questions ont stackoverflow, but it didn't help.
I'm using VueJS and semantic-ui modal.
According to my structure of code, each time i call the "show modal" method, a new modal is added to the source page with the same id :
<div id="myModal ...>
So finally the content of this modal is wrong and not expected because the changes are in the last modal (conflict id). But anyway duplicating the modal code is wrong.
So i made a jsfiddle to be clear : https://jsfiddle.net/3ut5d9uu/5/
To reproduce the bug :
click on "open modal", you see the name "a"
click on "change name", open modal, the name has changed (just appending "x"), this is ok. You can repeat if you want.
click on "change page", you go to page 2, click again to go to page 1
"change name" has now no effect in the modal content.
Help to debug : i can see in my developement browser that each time "openModal" is called, a full code is added at the end at the DOM and never removed :
<div class="ui dimmer modals page inverted transition hidden">
<div id="myModal"...
So we have several same ids "myModal".
But i could'nt fix that.
Thanks for your help.

As mentioned in the comment, there's a conflict between vue and jquery
Vue uses a shadow dom that adds and removes items as needed
jQuery relies on the item remaining in the DOM the entire time.
this conflict happens when you go from one page to another.
While I would strongly recommend removing jquery, in favour of something like https://github.com/almino/semantic-ui-vue2, there is a way to handle this.
here is the working fiddle
https://jsfiddle.net/3ut5d9uu/6/
this is done through a couple key things,
maintaining scope of dome by tracking it within vue. Here we assign reference to the jQuery modal object to a vuew data object
,mounted: function () {
this.modalDom = $('#myModal').modal({ inverted: true, closable: false });
}
you will also need to add modalDom to data
let dataPage1 = {
name: 'a',
modalDom: null
};
and then use that to show/hide modal
openModal: function() {
this.modalDom.modal('show');
},
closeModal: function() {
this.modalDom.modal('hide');
},
voilà, Bob = yourUncle;

Load scripts in bootstrap modal when getting fragment of page

I'm currently getting a fragment of a page and loading in bootstrap modal.
This fragment of page includes the jQuery required to load Google Maps but when the modal loads the content, all scripts are getting stripped so subsequently, the maps don't load.
Even if I directly insert the scripts inside the modal-body class, they still get stripped.
Is there a workaround to this at all?
What we're currently using to trigger the modal is:-
Launch demo modal
I can provide further code in use if needed to answer accurately.
=== Edit: Providing more code in use on request...
So we're including a sitewide link that triggers bootstrap modal. The link that is triggering modal can be seen above and here is the rest of the code in relation the modal.
What we wish to load in the modal is just a fragment of the page at /stores, all the code that is loaded at this URL can be seen here. From this page though, we only really wish to load everything inside .modal-container on line 192 but as necessary scripts reside outside of this div in the same file, we aren't capturing this when we try to load in modal. So previously, our modal trigger looked like:-
Launch demo modal
This then led us to try and just wrap entire file content inside div and call it's contents as the fragment of page in modal so that we can pull the necessary scripts required to load #map_canvas but alas, all scripts are stripped out of modal...
Hope this gives greater explanation into what we're trying to achieve.
=== Edit 2: We've actually fixed this via a workaround but it was a mammoth job so will post answer as soon as I can...

I'm using the following code to load view on boostrap modal :
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$(data).modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
With the following trigger :
<i class="icon-plus icon-white"></i>
By using this method you will ensure that all you script will be loaded when your modal will display. This is only this workaroung that I found to correctly showing my modal.
Everything that I have to show on my form (new.html) will be displayed perfectly.
Thus, I suggest that you put all you releavant code to Google Map on the page corresponding to /stores.
Edit
You trigger should be :
Launch demo modal
Instead of :
Launch demo modal`
Edit2
The problem that I see, is that you modal inclusion do not get the JS files because these are not within your inclusion section. I'm not a PHP expert, but here is to option that you might try :
Option1 (not very clean)
You can add <script>Google Map required JS File</script> tag inside the <div class="modal-container"></div> but you will get duplicate tag for the same JS file.
Option2 (Might be possible ?)
Create new file and add your section <div class="modal-container"></div> with your required JS files.
Replace the line 192 by including your new file and call your modal by passing your current store object in order to display your information in the modal.
Let me know if its help.

Has StackOverflow changed your code?
Launch demo modal
You have the classname within the href? This could be part of the problem.

Javascript alert popup form

i have search this whole site and google but cannot find it so, here goes!
i would like a way to show a form when using alert.
for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.
i have seen this done but cannot find the same site again.
i have tried putting htm to alert with little success of posting.
any Help is Highly Appreciated!

What you are looking for is a Prompt Box:
<script type="text/javascript">
function show_prompt() {
var name = prompt('Please enter your name','Poppy');
if (name != null && name != "") {
alert(name);
}
}
</script>
example taken from here: http://www.w3schools.com/js/js_popup.asp

you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/

To complete #Liv's answer you can use jQuery's UI
Reference: Modal Form
The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
It pretty much what I understood you need.
Good luck!

HTML can't be placed in system dialogs generated by alert(), confirm() or prompt(). However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:
$("<div>Place your HTML here</div>").appendTo("body").dialog({
modal: true,
title: "Enter a title here"
});
Make sure you run this code after the page has loaded by using either window.onload or $(document).ready().
Ad#m

You will not be able to do this with alert, but you should take a look at how to create modal windows.

I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.