17

It is very simple to create modal popup in Magento 2. Like if you want to display any static block in popup, you can do it simply by calling the content and displaying it. We should start by creating new module in Magento 2. app/code/Example/ModalOverlay/registration.php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\...


14

You should create a module first, then after create a requirejs-config.js file at app/code/Vendor/YourModule/view/frontend/requirejs-config.js var config = { paths: { 'myjs': "Vendor_YourModule/js/myfile" }, shim: { 'myjs': { deps: ['jquery'] } } } You need to create myfile.js in app/code/Vendor/...


8

You just need to add a container for the modal <div id="popup-modal"></div> and a small bit of javascript to initialise the modal like below: <div id="popup-modal"><p>Hello World</p></div> <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { var options = { ...


7

Why not just remove buttons from footer? _getModalOptions: function() { /** * Modal options */ var options = { type: 'popup', responsive: true, title: 'Customer Details', buttons: [] }; return options; },


6

try this one for ajax request on modal popup window. html Code <div style="margin-top: 15px;"> <button type="button" id="openModel" class="custom_model_popup">Questions?</button> <div id="myModel"> <form action="<?php echo $baseURL . 'pq/';?>" method="post" id="form-validate" enctype="multipart/form-data" ...


5

Got the solution to add opened function getModalOptions. Something like this, _getModalOptions: function() { /** * Modal options */ var options = { type: 'popup', responsive: true, title: 'Customer Details', buttons: [{ ...


5

Two buttons Cancel and OK is default values defined in vendor/magento/module-ui/view/base/web/js/modal/confirm.js. If you want to update these button (not use translate), you have to override vendor/magento/module-checkout/view/frontend/web/js/sidebar.js, where confirm.js is used, by copy it to custom theme app/design/frontend/<Vendor>/<Theme>/...


4

define([ 'jquery', 'Magento_Ui/js/modal/modal' ], function ($,example,modal) { var options = { type: 'popup', responsive: true, innerScroll: true, buttons: [{ text: $.mage.__('Continue'), class: 'primary action submit btn btn-default', click: ...


4

try this $('.modal-popup._inner-scroll .modal-inner-wrap').css('background-color','black'); require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { var options = { type: 'popup', responsive: true, innerScroll: true, slideshowSpeed:...


4

To close popup model there is method closeModal(). Updated code: function ($) { "use strict"; // Review form var x = { type: 'popup', responsive: true, innerScroll: true, buttons: false, title: "Header contant", modalClass: "popup-center abc-product-review", clickableOverlay: true, ...


3

After you get success response you can simply a.modal("closeModal"); to close your modal. For Example success: function (response) { var returnedData = JSON.parse(response); if (returnedData.status === 'success') $("#success").html(returnedData.messages); else $("#error").html(returnedData.messages); a.modal("closeModal");...


3

you can do this by following layout xml file. app/code/Company/Module/view/frontend/layout/default.xml the content would be like this: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> // reference a container to show your ...


3

Hi Hardik you have solved this problem using below ways 1) By putting your model code inside $( document ).ready() 2) Check the length of your div whether you declared div is available or not. Try the below code. require( [ 'jquery', 'Magento_Ui/js/modal/modal', 'owlslider' ], function( $, modal ) { ...


3

Here is the module also can manage Popup settings from Admin Panel. You can download from Github


2

Popup modal add to the catalog-add-to-cart.js File to the below Code Center success: function(res) { if (self.isLoaderEnabled()) { $('body').trigger(self.options.processStop); } if (res.backUrl) { window.location = res.backUrl; return; ...


2

You can use the browser's localStorage to check whether or not the pop-up was shown to a client. <div id="popup-modal"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <h1>Subscribe for Our <span>exclusive offer</span></h1> <p>Be the ...


2

I had the same problem the solution it to copy it into: <Theme_Dir>/Magento_Ui/web/templates/modal/modal-popup.html


2

Did you delete the static file located at: /pub/static/frontend/{Vendor}/{ThemeName}/en_US/Magento_Ui/templates/modal/modal-popup.html Also, in your post you are referencing .phtml, when that particular file is a .html file. Maybe that is the problem. Magento will automatically pull / move / symlink the static file if it doesn't exist in pub/static. No ...


2

add this code you will resolve the problem if ($("#popup-modal").length != 0) { var popup = modal(options, $('#popup-modal')); jQuery('#popup-modal').modal('openModal'); }


2

In your code you have used this: var close = this; Where 'this' will represent $('#review-form') object. While you have initiated modal for $('#form-div-id'). So This is the reason that's why modal is not closing, closeModal method belongs to modal($('#form-div-id')) object not form object. Please use model like this: Initialize model like define([ ...


2

<a href="javascript:;" class="bt-action" data="More Info" >More Info</a><div class="bt-action-file" style="display: none;">Content here</div> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { var options = { ...


2

You can use 'modalClass' option to set a custom css class to your modal popup und define width in the css: .my-custom-class .modal-inner-wrap { width: 600px; }


2

It's not possible to say what issue you are having, as you don't explain your implementation or the error you are getting. But i'll walk through a way to set this up (there are many ways to do this, other might add other solutions). This method will use a theme to get the needed files in place, so make sure you have a theme set up and it's set in the admin ...


2

.modal({...options}) will only set up the modal (and auto open if autoOpen: true). You should instruct the modal to open by passing "openModal" to it (.modal("openModal")). Try this code: <div id="mybutton" class="button"> click </div> <div id="testcontent" style="display:none;"> blah </div> <script> require( [ ...


2

The best practice is to use mixins. I also note that requirejs-config.js is wrong. We don't need web folder in the path. Magento_Ui/web/js/modal/modal => Magento_Ui/js/modal/modal Using mixins: app/code/Vendor/Module/view/frontend/requirejs-config.js var config = { config: { mixins: { 'Magento_Ui/js/modal/modal': { ...


2

make the following change in _setActive function in modal.js _setActive: function () { var zIndex = this.modal.css("zIndex", ), baseIndex = zIndex + this._getVisibleCount(); if (this.modal.data('active')) { return; } this.modal.data('active', true); // this.overlay.zIndex(++baseIndex); ...


2

Finally, I've figured out by myself, I want popup preview on grid's actions Column, so you can start by adding below code Test/PreviewPopup/view/adminhtml/layout/previewpopup_actionslog_index.xml <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/...


2

The folder path is given wrong in your overide,It should be inside Web folder not templates theme/Magento_Ui/web/templates/modal/modal-popup.html


1

You have to add these two files using your local.xml file. <action method="addItem"><type>skin_js</type><name>js/bootstrap.min.js</name></action> <action method="addItem"><type>skin_css</type><name>css/bootstrap.min.css</name></action> make sure these two files exist in your skin ...


1

Try like this, its simple way to create and it will work. <script> function createDivCookie(){ cookieName = 'testCookie'; cookieDuration = 14; //days createCookie(window.cookieName,window.cookieValue, window.cookieDuration); // Create the cookie //Place Your Code to Show Popup message } if(checkCookie(window.cookieName) != window....


Only top voted, non community-wiki answers of a minimum length are eligible