Try this it works,
In default.xml
,
<referenceBlock name="top.links">
<block class="Magento\Framework\View\Element\Template" name="custom_link" template="Magento_Theme::html/custom_link.phtml"></block>
</referenceBlock>
In custom_link.phtml,
<li class="custom-li">
<a href="#"><?php echo __('Top links')?></a>
</li>
<div id="popup-modal" style="display:none">
<h1>text</h1>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
$('.custom-li').click(function(event){
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: 'popup modal title',
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-modal'));
$('#popup-modal').modal('openModal');
}
);
</script>
For Exmaple: I used magnify popup to display popup on load page
Namespace: Prince
ModuleName: Popup
1) First of all put js and css files of your popup in web folder of module
app/code/Prince/Popup/view/frontend/web/js/jquery.magnific-popup.min.js
app/code/Prince/Popup/view/frontend/web/css/magnific-popup.css
2) Now define your custom popup js in requirejs-config.js or create new requirejs-config.js file
app/code/Prince/Popup/view/frontend/requirejs-config.js
var config = {
map: {
'*': {
magnificPopup: 'Prince_Popup/js/jquery.magnific-popup.min',
}
},
shim: {
magnificPopup: {
deps: ['jquery']
}
}
};
3) Now create template file for popup
app/code/Prince/Popup/view/frontend/templates/index/popup.phtml
<div id="popup-content" class="popup-content mfp-with-anim">
Your Poup Content...............
</div>
<script type="text/javascript">
requirejs(['jquery', 'magnificPopup' ],
function ($, magnificPopup) {
$(document).ready(function(){
$.magnificPopup.open({
items: {
src: '#popup-content'
},
type: 'inline',
removalDelay: 500,
mainClass: 'mfp-newspaper'
});
$('#popup-content').css('display','inline block');
});
});
</script>
4) Inject this template file in xml where you need to show popup
for exmaple to show popup on home page. ovveride cms_index_index.xml
<?xml version="1.0" ?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="Prince_Popup/js/jquery.magnific-popup.min.js"/>
<css src="Prince_Popup/css/magnific-popup.css"/>
</head>
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="index.home" template="Prince_Popup::index/popup.phtml"/>
</referenceContainer>
</body>
</page>
Best Answer
You can open popup when
<a>
tag onClick using below codeLet me know if you have any issue.