4

I am Using Magento 2.2.2. I have inserted this code in the Block i.e Content>Block when wei click on the Ask an Expert image , The Modal popup should appear. But currently its not showing popup, the error is show.

<div class="call-us">
    <div class="call-us-content">
        <a id="click-me" href="#"><img src="{{media url="wysiwyg/icon/askanExpert.png"}}" alt="Ask an Expert" style="height: 50px; position: relative;" /></a>
    </div>

</div>
<div id="popup-mpdal"  style="display:none;">
<br>
<img src="{{media url="wysiwyg/icon/IconAskExpert.png"}}" alt="Ask an Expert" />
<br/>
<p style="font-size: 17px;">Mon-Sat (10 AM to 6 PM)</p>
<p style="font-size: 18px;">Get Free Consultation From Our Certified Expert</p><br>
<p style="color: #2B375C;font-size: 35px;"><em class="fa fa-phone" style=" padding-right: 10px;    position: relative;
    top: 2px;"></em><a style="    color: #76c705;" href="tel:0120-4673988">0120-4673988</a></p>
</div>
<script type="text/javascript" xml="space">
    require(
        [
     'jquery',
            'Magento_Ui/js/modal/modal',
            '!domReady'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
               modalLeftMargin: 45,
                title: 'Consult our Expert',
  modalClass: 'ask-our-expert',
 clickableOverlay: true,
  buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]

            };


 var popup = modal(options, $('#popup-mpdal'));

            $("#click-me").on('click',function(){ 

             $("#popup-mpdal").modal("openModal");

            });

        }
    );

</script>
13
  • try to put that code in PHTML and call that PHTML in BLOCK
    – kunj
    Jun 4, 2018 at 11:58
  • I have inserted that code in PHTML file and after that call that phtml file in block. But its not working. Still its getting an error... bootstrap.min.js:7 Uncaught TypeError: f[b] is not a function Jun 5, 2018 at 4:23
  • have you tried without ` xml="space"`?
    – kunj
    Jun 5, 2018 at 4:25
  • Yes, i have tried with or without ` xml="space"`. Jun 5, 2018 at 4:28
  • I hope you have not added or update your new bootstrap.min.js file. can you share website URL?
    – kunj
    Jun 5, 2018 at 4:30

3 Answers 3

4

I got the same issue when I was using the "modal" function of the Magento-UI. It was fixed using a noConflict function from bootstrap.

$.fn.bsModal = $.fn.modal.noConflict();

For example, in my case, I got this issue using the Magemenu extension so it was fixed the following way

 require(['jquery',"Ves_All/lib/bootstrap/js/bootstrap.min"], function ($) {
    $.fn.bsModal = $.fn.modal.noConflict();
    ...
    ...
 });

After that, I could use the modal of the Magento-UI without problems.

4
0

Better late than never

Thought it would be best if I propose a complete solution here which works for me.

Firstly adding the following line of code at the top of your JS file (widget, component,...):

$.fn.bsModal = $.fn.modal.noConflict();

Like this:

define([
    'jquery',
    'Magento_Ui/js/modal/modal',
    'mage/translate',
    'mage/url'
], function ($, modal, $t, mageUrl) {
    'use strict';

    $.fn.bsModal = $.fn.modal.noConflict();

    // more code
});

Secondly, initiate a modal like usual, no changes to this procedure:

modal(options, $('#modal-id'));

Lastly, call a modal like this:

$("#modal-id").bsModal("show");

instead of

$("#modal-id").modal("openModal");

Happy coding!

-1

I resolved it by lowering down the bootstrap version

Current one : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

before I was using 3.3.7

1
  • 3
    I am facing the same issue and I am already using 3.3.6 Feb 26, 2019 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.