M2 Modal Widget - Variable for Link, Title, and Content
-
03-03-2021 - |
Question
I want to have links that activate a modal window with dynamic content and title. I would assume there is a way to do this with variables. I can do it now as a separate script for each modal, but is there a way to make it dynamic?
Links:
<a href="#" id="click-header">Modal 1</a>
<a href="#" id="click-header">Modal 2</a>
<a href="#" id="click-header">Modal 3</a>
<a href="#" id="click-header">Modal 4</a>
Modal Content
<div id="header-mpdal" style="display:none;">
<h3>TITLE 1</h3>
<p>CONTENT CONTENT 1</p>
</div>
<div id="header-mpdal" style="display:none;">
<h3>TITLE 2</h3>
<p>CONTENT 2</p>
</div>
<div id="header-mpdal" style="display:none;">
<h3>TITLE 3</h3>
<p>CONTENT 3</p>
</div>
<div id="header-mpdal" style="display:none;">
<h3>TITLE 4</h3>
<p>CONTENT 4</p>
</div>
Javascript
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: 'Dynamic Title',
buttons: [{
text: $.mage.__('Ok'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#header-mpdal'));
$("#click-header").on('click',function(){
$("#dynamic").modal("openModal");
});
}
);
La solution
Try following way:
<a href="#" data-modal-id="header-modal-1" class="click-header">Modal 1</a>
<a href="#" data-modal-id="header-modal-2" class="click-header">Modal 2</a>
<a href="#" data-modal-id="header-modal-3" class="click-header">Modal 3</a>
<a href="#" data-modal-id="header-modal-4" class="click-header">Modal 4</a>
<div id="header-modal-1" style="display:none;">
<h3>TITLE 1</h3>
<p>CONTENT CONTENT 1</p>
</div>
<div id="header-modal-2" style="display:none;">
<h3>TITLE 2</h3>
<p>CONTENT 2</p>
</div>
<div id="header-modal-3" style="display:none;">
<h3>TITLE 3</h3>
<p>CONTENT 3</p>
</div>
<div id="header-modal-4" style="display:none;">
<h3>TITLE 4</h3>
<p>CONTENT 4</p>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: 'Dynamic Title',
buttons: [{
text: $.mage.__('Ok'),
class: '',
click: function () {
this.closeModal();
}
}]
};
$(".click-header").on('click',function() {
var dynamicTitle = $(this).html();
options.title = dynamicTitle;
var modalId = $(this).attr('data-modal-id');
var popup = modal(options, $('#'+modalId));
$('#'+modalId).modal("openModal");
});
}
);
</script>
Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange