magento2 এ কীভাবে একটি ফর্ম পপআপ-মডেল তৈরি করবেন

Question

আমি ম্যাজেন্টো 2 তে নতুন। আমি আমার নতুন ফর্মের জন্য একটি পপআপ-মডেল তৈরি করার চেষ্টা করছি। আমি একটি পপআপ তৈরি করেছি যা সূক্ষ্মভাবে কাজ করে তবে একটি মডেল তৈরি করতে অক্ষম।

পপআপের জন্য নিম্নলিখিত কোডটি যা পৃষ্ঠায় লোড হয় -

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

আমি এই প্রশ্নটিকে অফ-টপিক হিসাবে বন্ধ করতে ভোট দিচ্ছি কারণ এটি জাভাস্ক্রিপ্ট সম্পর্কে এবং সাধারণ স্ট্যাকওভারফ্লো ডটকম সাইটটির সাথে সম্পর্কিত

— স্যান্ডার ম্যানগেল

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> ট্যাগে ডিভ কন্টেন্ট কীভাবে খুলবেন?

— সুরেশ চিকানী

@ এসএইচপ্যাটেল একই সমাধান খুঁজছেন, আপনি এটি খুঁজে পেয়েছেন?

— লুইস গার্সিয়া

@ লুইস গার্সিয়া হ্যাঁ আমার সমাধান আছে

— সুরেশ চিকানী

হ্যাঁ আপনি আপনার প্রশ্ন রাখতে পারেন।

— সুরেশ চিকানী

@ এসএইচপ্যাটেল কীভাবে আমি ফর্ম ডেটা পেতে পারি? ভিতরে click: function () { this.closeModal();}যদি আমি textboxভিতরে আছে <div id="popup-modal">?

— বোজ্জায়াহ

Answer 2

আপনাকে Magento_Ui / js / মডেল / মডেল উইজেট ব্যবহার করতে হবে use অফিসিয়াল ডকুমেন্টেশন উদাহরণে আরও বিশদটি দেখুন :

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

আমি কীভাবে ইউআই-কম্পোনেন্ট মডেল রূপটি তৈরি করতে পারি। নিয়ামক দ্বারা কোনও পুনর্নির্দেশ নয়

— mrtuvn

আমি কীভাবে ফর্ম ডেটা পেতে পারি? ভিতরে click: function () { this.closeModal();}যদি আমি textboxভিতরে আছে <div id="popup-modal">?

— বোজ্জায়াহ

আমি কি এই কলসমোডাল ()

— জয়সা

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>

যেহেতু এটি একটি প্রতিক্রিয়াশীল সাইটে রয়েছে তাই আমি এটির প্রতিক্রিয়াশীল তা নিশ্চিত করার জন্য একটি ভিডিও র‍্যাপার যুক্ত করেছি।

এটি ঘটানোর জন্য এখানে সিএসএস রয়েছে:

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