Hot answers tagged

43

Try below code: <div id="popup-modal"> <h1> Hi I'm here.... </h1> </div> <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { var options = { type: 'popup', ...


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\...


10

You need to use Magento_Ui/js/modal/modal widget. See more details in Official Documentation Example: require([ 'jquery', 'jquery/ui', 'Magento_Ui/js/modal/modal' ], function($){ $('<div />').html('Modal Window Content') .modal({ title: 'My Title', autoOpen: true, closed: function () { ...


10

I couldn't get an override of the modal.closeModal() function to work via mixins and also I think doing it via a mixin makes it override through the whole website on all modals, which I do not want. I only need it on this one modal. I ended up by simply removing any trigger that will call modal.closeModal(). There are some other modal options you can use to ...


9

You don't have to extend the modal. You simply have to listen for the 'modalclosed' event on the DOM element on which the modal had been invoked. In fact the modal() function returns this element which makes the code trivial. $('#popup-modal').modal('openModal').on('modalclosed', function() { /*insert code here*/ });


9

You have to extend widget function _close in your custom module. Follow below steps for achieve your task: First create requirejs-config.js with code: var config = { map: { '*': { custommodal: 'Vendor_Modulename/js/custom', } } }; Create your js file in your web folder: define([ 'jquery', 'jquery/ui', '...


7

I reckon using mixins in that case would be relevant. You can try the following: First in your module, create the following view/base/requirejs-config.js : var config = { 'config':{ 'mixins': { 'Magento_Ui/js/modal/modal': { 'Vendor_Module/hook':true } } } }; Then create view/base/web/hook....


7

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, ...


7

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


5

The widget can be initialized with a few lines of JS, where as the component requires many lines of XML and still uses the widget. So why would anyone use the XML method? The UI component system allows a developer to package up a number of different RequireJS modules as KnockoutJS view model constructors, (with associated "remote" Knockout.js templates), ...


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>/...


5

Create a new file checkout_index_index.xml in following path app/design/frontend/[package_name]/[your_theme]/Magento_Checkout/layout/ Then add the following code to this new created file. <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration....


4

You can show ajax popup by extending catalog-add-to-cart.js file of Magento-Catalog module. Steps to do : 1 - Copy catalog-add-to-cart.js from '\module-catalog\view\frontend\web\js/catalog-add-to-cart.js and place into your theme folder \Package/theme/Magento_Catalog/web/js/catalog-add-to-cart.js 2 - find ajaxSubmit: function and place below code snippet ...


4

It does come from vendor\magento\module-customer\view\frontend\web\template\authentication-popup.html. Since this is a knockout.js template file, you will have to delete your static content and then re-deploy (if you are in production mode) in order for changes to come through (clearing browser cache is also necessary sometimes). Instead of editing the file ...


3

You simple add your embedded code in custom_popup div. <div id="custom_popup" style="display:none;"> <div class="youtube-video"> <iframe width="854" height="480" src="https://www.youtube.com/embed/UKlkIzD-Yj8" frameborder="0" allowfullscreen></iframe> </div> <?php echo $block->getLayout()->...


3

Try this success: function(data) { //events_popup is you popup id $('#events_popup').modal('closeModal'); } This is your final answer <div id="events_popup" style="display: none;" class="events_popup"> <script type="text/javascript"> require( [ 'jquery' ], function($,modal) { $("#<?php echo $...


3

I found the answer by myself. You need to define 'text!ui/template/modal/modal-gallery.html' as galleryTpl and use the modalOptions as below: var modalOptions = { type: 'gallery', customTpl: 'gallery', galleryTpl: galleryTpl, };


3

Just use single line followed by element : $("#popup-modal").modal("closeModal");


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 ) { ...


2

Modal window popup in header area <a href="#" id="click-header"> View Video </a> <div id="header-mpdal" style="display:none;"> <div class="videoWrapper"> <iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/P45AMKIW0ok" width="560"> ...


2

The thing is named authentication-popup in the layout xml. You can remove it with <referenceBlock name="authentication-popup" remove="true"/> in ../page_layout/1column.xml for example. But I'm not really sure what it is used for either and if it is safe to remove it just like that. This seems to be the file it is coming from: ../app/code/Magento/...


2

If you want to close an model then you should use class closeModal() of model widget Like: $('#popup-modal').modal('closeModal'); As you want to execute some code when the popup closes by clicking on close button. Then I guess you have already doing right way .On click() function at /* some stuff */ You need your code. click: function () { ...


2

You can use this: $('.action-close').click(function(){ <your code...> });


1

$param = isset($_GET['version']); will always evaluate to true or false and you are comapring true|false with the string a. I think you mean $param = isset($_GET['version']) ? $_GET['version'] : null;


1

Yes, you can override the template, but if you do it will change for all modal/pop up being triggered in your site. (Footer is not a different template, modals are a complete set of HTML per type) You have two options: Override directly the modal templating from Magento_Ui -> vendor/magento/module-ui/view/base/web/templates/modal folder has all the ...


1

You can try this code. <script> require([ 'jquery', 'Magento_Ui/js/modal/alert' ],function($,alert){ $(document).ready(function() { $("#vendor_search").on('click',function(event){ event.preventDefault(); var input = $("#customer_id").val(); var param = { data : input};...


1

We can achieve it by following way: Add an id to iframe say playerid. Use following code to stop video on click. $('.action-close').on('click', function() { var video = $("#playerid").attr("src"); $("#playerid").attr("src",""); $("#playerid").attr("src",video); }); Above code will keep src in a variable, remove src from iframe and again add src ...


1

UI Modal is a global UI component and it is using on-demand (it means you cannot remove it with XML structs like <remove src="modal.js"/> or something similar). It's not only using on the frontend, but it is also using widely in adminhtml as well. For e.g: src/vendor/magento/module-catalog/view/adminhtml/templates/catalog/category/tree.phtml It is ...


1

To remove the static resources, linked in a page , make a change similar to the following in a theme extending app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration....


1

Try this, config.xml <?xml version="1.0"?> <config> <modules> <OptFirst_ReviewMyCompany> <version>1.0.0</version> </OptFirst_ReviewMyCompany> </modules> <frontend> <routers> <reviewmycompany> <use>standard</use> ...


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