Set custom class for Modal popup Magento 2
Question
I have different popups and each popup has different styles, Anyone know how I can restyle each Modal by adding custom class or something.
Here one of my modal popup code:
<script type="text/javascript">
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: 'Popup1',
buttons: [{
text: $.mage.__('Continue'),
class: 'btn_class',
click: function () {
this.closeModal();
}
}]
};
$(".btn_open").click(function() {
$(".popup_content").modal(options).modal('openModal');
});
}
);
</script>
<span class="btn_open">Get first popup</span>
<div class="popup_content">First popup content</div>
La solution
You could use "modalClass" to set a particular class for each modal. See all of the possible modal paremeters in the following file:
vendor/magento/module-ui/view/base/web/js/modal/modal.js
Autres conseils
Different parameters can be used for Modal Popup creation by the reference of the file : vendor/magento/module-ui/view/base/web/js/modal/modal.js
<script>
require(['jquery','Magento_Ui/js/modal/modal'],
function($,modal) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: 'Popup',
modalClass: 'see-detail-modal',
buttons: [{
text: $.mage.__('Close'),
class: 'product-popup-hide',
click: function () {
this.closeModal();
}
}]
};
$( ".see-details" ).click(function() {
var popup = modal(options, $('#see-details-popup'));
$('#see-details-popup').modal('openModal');
});
}
);
</script>
Go to your script code and add one line code: modalClass: 'question-modal' check below script.
require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { var options = { type: 'popup', responsive: true, innerScroll: true, modalClass: 'question-modal', buttons: [] }; var popup = modal(options, $('#question-popup')); $("#question-me").on('click',function(){ $("#question-popup").modal("openModal"); }); } );
Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange