Multiple Modal Popups on same page
-
14-04-2021 - |
Вопрос
I have a 2 links on the product page which both need the modal popup component attaching to them, I have 1 working fine but If I try to add the same script for the 2nd one they both stop working
This is what I have for the first link:
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: false,
innerScroll: true,
buttons: []
};
var popup = modal(options, $('#finance-info'));
$("#finance-popup").on('click',function(){
$("#finance-info").modal("openModal");
});
}
);
For the second link I have:
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: false,
innerScroll: true,
buttons: []
};
var popup = modal(options, $('#information-mpdal'));
$("#request-more").on('click',function(){
$("#information-mpdal").modal("openModal");
});
}
);
Both of these scripts are in a custom.js file. Is it possible to have 2 modal popups on the same page?
Решение 2
I've fixed this, I didn't need to create 2 separate require.js calls for each modal, I just needed to create 2 variables in 1 call like this:
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function (
$,
modal
) {
var modaloption = {
type: 'popup',
responsive: false,
innerScroll: true,
clickableOverlay: true,
buttons: []
};
var popup = modal(options, $('#information-mpdal'));
$("#request-more").on('click',function(){
$("#information-mpdal").modal("openModal");
});
var popup = modal(options, $('#information-mpdal2'));
$("#request-more2").on('click',function(){
$("#information-mpdal2").modal("openModal");
});
}
);
</script>
Другие советы
This should be ok, there's no limit on modals per page and you're using distinct elements for each one.
I notice one of your modals has the node $('#information-mpdal'), is that a typo? It could explain "Cannot read property 'nodeName' of undefined" you mention in the comments.