cara membuat form popup-modal di magento2

20

Saya baru mengenal magento2. Saya mencoba membuat modal-munculan untuk formulir baru saya. Saya telah membuat popup yang berfungsi dengan baik tetapi tidak dapat membuat modal.

Berikut ini adalah kode untuk sembulan yang dimuat di laman muat--

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

Tolong bantu saya untuk membuat modal. Bantuan apa pun sangat dihargai.

magento2 widgets modal pengguna2978128
sumber
Saya memberikan suara untuk menutup pertanyaan ini sebagai di luar topik karena ini tentang Javascript dan termasuk dalam situs stackoverflow.com umum
Sander Mangel

Jawaban:

42

Coba kode di bawah ini:

<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>
Sohel Rana
sumber
Bagaimana cara membuka konten div di tag <a> onClick?
Suresh Chikani
@SHPatel Mencari solusi yang sama, sudahkah Anda menemukannya?
Luis Garcia
@Luis Garcia Ya saya punya solusi
Suresh Chikani
Ya, Anda dapat mengajukan pertanyaan.
Suresh Chikani
@SHPatel bagaimana saya bisa mendapatkan data formulir? di dalam click: function () { this.closeModal();}If i have textboxinside <div id="popup-modal">?
Bojjaiah
10

Anda perlu menggunakan widget Magento_Ui / js / modal / modal. Lihat lebih detail di Contoh Dokumentasi Resmi :

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
            }]
         });
});
KAndy
sumber
bagaimana saya bisa membuat mengedit bentuk ui-komponen modal. Tidak ada pengalihan oleh controller
mrtuvn
bagaimana saya bisa mendapatkan data formulir? di dalam click: function () { this.closeModal();}If i have textboxinside <div id="popup-modal">?
Bojjaiah
haruskah saya memanggil fungsi lain di dalam fungsi klik alih-alih this.closeModal ()
Jaisa
1

Jendela modal muncul di area header

masukkan deskripsi gambar di sini

 <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 ada di sini: -

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

karena ini ada di situs yang responsif, saya menambahkan Wrapper video untuk memastikannya responsif.

Inilah CSS untuk mewujudkannya:

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

Buat blok statis dan masukkan yang berikut ini:

<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>
Teja Bhagavan Kollepara
sumber
0 
<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>
Victor Nazarov
sumber