Magento2 में एक फॉर्म पॉपअप-मोडल कैसे बनाया जाए

Question

मैं Magento2 के लिए नया हूं। मैं अपने नए रूप के लिए एक पॉपअप-मोडल बनाने की कोशिश कर रहा हूं। मैंने एक पॉपअप बनाया है जो ठीक काम करता है लेकिन एक मोडल बनाने में असमर्थ है।

पॉपअप के लिए कोड निम्नलिखित है जो पेज लोड पर लोड होता है--

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");
                }
            }
        });
    }
);

कृपया मुझे एक मोडल बनाने में मदद करें। कोई भी मदद सचमुच सराहनीय होगी।

Comments

मैं क्योंकि यह जावास्क्रिप्ट के बारे में है और सामान्य stackoverflow.com साइट पर अंतर्गत आता है विषय से हटकर के रूप में इस सवाल को बंद करने के मतदान कर रहा हूँ

— Sander Mangel

Answer 1

कोड के नीचे आज़माएं:

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

Comments

<a> टैग onClick पर div सामग्री कैसे खोलें?

— सुरेश चिकानी

@SHPatel उसी समाधान की तलाश में है, क्या आपने इसे ढूंढा है?

— लुइस गार्सिया

@ लिस गार्सिया हां मेरे पास समाधान है

— सुरेश चिकानी

हां आप अपना सवाल रख सकते हैं।

— सुरेश चिकानी

@SHPatel मैं प्रपत्र डेटा कैसे प्राप्त कर सकता हूं? अंदर click: function () { this.closeModal();}अगर मैं textboxअंदर है <div id="popup-modal">?

— बोजिय्याह

Answer 2

आपको Magento_Ui / js / modal / modal विजेट का उपयोग करने की आवश्यकता है। आधिकारिक प्रलेखन उदाहरण में अधिक जानकारी देखें :

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
            }]
         });
});

Comments

मैं ui- घटक मोडल कैसे संपादित कर सकता हूं। नियंत्रक द्वारा कोई पुनर्निर्देशित नहीं

— mrtuvn

मैं फॉर्म डेटा कैसे प्राप्त कर सकता हूं? अंदर click: function () { this.closeModal();}अगर मैं textboxअंदर है <div id="popup-modal">?

— बोजजिया

क्या मैं इसके बजाय क्लिक फ़ंक्शन के अंदर किसी अन्य फ़ंक्शन को कॉल कर सकता हूं। क्लोज़मॉडल ()

— Jaisa

Answer 3

हेडर क्षेत्र में मोडल विंडो पॉपअप

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

चूंकि यह एक संवेदनशील साइट पर है, इसलिए मैंने यह सुनिश्चित करने के लिए एक वीडियो आवरण जोड़ा है कि यह उत्तरदायी है।

यहाँ ऐसा करने के लिए CSS है:

.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%;}
}

Answer 4

स्थिर ब्लॉक बनाएं और निम्नलिखित डालें:

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

Answer 5

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