how to create a form popup-modal in magento2

  • I am new to magento2. i'm trying to create a popup-modal for my new form. I have created a popup which works fine but unable to create a modal.

    Following is the code for popup which loads on page load--

    require([
            'jquery',
            'Magento_Ui/js/modal/alert'
        ],
        function($, alert) {
           alert({
                title: "Some title",
                content: "we can show popuop based on cookies later",
                autoOpen: true,
                clickableOverlay: false,
                focus: "",
                actions: {
                    always: function(){
                        console.log("modal closed");
                    }
                }
            });
        }
    );
    

    Please help me to create a modal. Any help is really appreciated.

    I'm voting to close this question as off-topic because it's about Javascript and belongs on the general stackoverflow.com site

  • 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',
                    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>
    

    How to open div content on tag onClick ?

    @SHPatel Looking for the same solution, have you find it?

    @Luis Garcia Yes I have solution

    Yes You can put your question.

    @SHPatel how can I get the form data? inside the `click: function () { this.closeModal();}` If i have `textbox` inside the `

    @ how can I get the form data? inside the `click: function () { this.closeModal();}` If i have `textbox` inside the `

    How can we use this script to open a pdf document in modal popup? We have the pdf included using WYSIWYG editor in a CMS page.

    Sir how can open popup on admin grid action? I try this code but is not working there

    For some one who looking for translate for title but doesn't work, then use this instead: title: ""

  • 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 () {
                    // on close
                },
                buttons: [{
                    text: 'Confirm',
                    attr: {
                        'data-action': 'confirm'
                    },
                    'class': 'action-primary',
                    click: clickCallback
                }]
             });
    });
    

    how i can creat edit form ui-component modal. No redirect by controller

    how can I get the form data? inside the `click: function () { this.closeModal();}` If i have `textbox` inside the `

    shall i call another function inside click function instead of this.closeModal()

  • Modal window popup in header area

    enter image description here

     <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">
            </iframe>
        </div>
    </div>
    

    Script is here: -

    <script>
        require(
            [
                'jquery',
                'Magento_Ui/js/modal/modal'
            ],
            function(
                $,
                modal
            ) {
                var options = {
                    type: 'popup',
                    responsive: true,
                    innerScroll: true,
                    title: '',
                    buttons: [{
                        text: $.mage.__('Close'),
                        class: '',
                        click: function () {
                            this.closeModal();
                        }
                    }]
                };
    
                var popup = modal(options, $('#header-mpdal'));
                $("#click-header").on('click',function(){ 
                    $("#header-mpdal").modal("openModal");
                });
    
            }
        );
    </script>
    

    since this is on a responsive site, I added a video Wrapper to make sure it's responsive.

    Here is CSS to make that happen:

    .videoWrapper { position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0;
    iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    }
    
  • Create static block and insert the following:

    <html>
    <head>
    <style>
    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    
    .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    button {
        background-color: #0ea3d6;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
    .close:hover { background: #00d9ff; }
    
    </style>
    </head>
    <body>
        <div class="row">
            <a href="#urlid"><button>Button</button></a>
            <div id="urlid" class="modalDialog">
                <div>
                    <a href="#close" title="Close" class="close">X</a>
                    <h2>Hand Tools</h2>
                    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
                    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
                </div>
            </div>
        </div>
    </body>
    </html>
    
  • <script>
    require(['Magento_Ui/js/modal/confirm'],
        function(confirm) {
            confirm({
                title: 'Confirm Dialog',
                content: "We need your confirmation there",
                actions: {
                    confirm: function() { console.log('confirmed') },
                    cancel: function() { console.log('canceled') }
                }
            });
    );
    </script>
    

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used