Backdrop for Sheet Modal not creating or dropping in

I have the code below which works fine but the backdrop is not being created, can someone help? i am using version 4.5.2

sheet

<body>
<div id="app" class="framework7-root">
    <div class="view view-main view-init">
        <div class="navbar">
            <div class="navbar-inner navbar-current">
                <div class="title" style="left: 103.5px;">Sheet Modal</div>
                <div class="right"><a class="link sheet-open" href="#" data-sheet=".my-sheet">Open Sheet</a></div>
            </div>
        </div>
        <div class="page page-current">
            <div class="page-content">
                <div class="block">
                    <p><a class="button button-fill sheet-open" href="#" data-sheet=".my-sheet">Open Sheet</a></p>
                    <p><a class="button button-fill sheet-close" href="#" data-sheet=".my-sheet">Close Sheet</a></p>
                    <p><a class="button button-fill dynamic-sheet" href="#">Create Dynamic Sheet</a></p>
                    <p><a class="button button-fill sheet-open" href="#" data-sheet=".my-sheet-top">Open Top Sheet</a></p>
                    <p><a class="button button-fill sheet-open" href="#" data-sheet=".my-sheet-swipe-to-close">Swipe To Close</a></p>
                    <p><a class="button button-fill sheet-open" href="#" data-sheet=".my-sheet-swipe-to-step">Swipe To Step</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="sheet-modal my-sheet">
        <div class="toolbar">
            <div class="toolbar-inner">
                <div class="left"></div>
                <div class="right"><a class="link sheet-close" href="#">Done</a></div>
            </div>
        </div>
        <div class="sheet-modal-inner">
            <div class="block">
                <h4>Info</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac.</p>
            </div>
        </div>
    </div>
    <div class="sheet-modal sheet-modal-top my-sheet-top">
        <div class="toolbar toolbar-bottom">
            <div class="toolbar-inner">
                <div class="left"></div>
                <div class="right"><a class="link sheet-close" href="#">Done</a></div>
            </div>
        </div>
        <div class="sheet-modal-inner">
            <div class="block">
                <h4>Info</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac.</p>
            </div>
        </div>
    </div>
    <div class="sheet-modal my-sheet-swipe-to-close" style="height:auto; --f7-sheet-bg-color: #fff;">
        <div class="sheet-modal-inner">
            <div class="page-content">
                <div class="block-title block-title-large">Hello!</div>
                <div class="block">
                    <p><b>Swipe me down to close</b></p>
                    <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem libero minus dignissimos repellat.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="sheet-modal my-sheet-swipe-to-step" style="height:auto; --f7-sheet-bg-color: #fff;">
        <div class="sheet-modal-inner">
            <div class="sheet-modal-swipe-step">
                <div class="display-flex padding justify-content-space-between align-items-center">
                    <div style="font-size: 18px"><b>Total:</b></div>
                    <div style="font-size: 22px"><b>$500</b></div>
                </div>
                <div class="padding-horizontal padding-bottom">
                    <a class="button button-large button-fill">Make Payment</a>
                    <div class="margin-top text-align-center">Swipe up for more details</div>
                </div>
            </div>
            <div class="block-title block-title-medium margin-top">Your order:</div>
            <div class="list no-hairlines">
                <ul>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">Item 1</div>
                            <div class="item-after text-color-black"><b>$200</b></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">Item 2</div>
                            <div class="item-after text-color-black"><b>$180</b></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">Delivery</div>
                            <div class="item-after text-color-black"><b>$120</b></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="sheet-backdrop">
    </div>
</div>

<script>
    var theme = 'ios';
    if (location.href.indexOf('theme=md') >= 0) theme = 'md';
    if (location.href.indexOf('theme=aurora') >= 0) theme = 'aurora';
    var plugin = {
        params: {
            theme: theme,
            root: '#app',
        }
    };
    if (Framework7.use) Framework7.use(plugin);
    else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
</script>
<script>
    var $$ = Dom7;

    // DOM events for my-sheet sheet
    $$('.my-sheet').on('sheet:open', function(e, sheet) {
        console.log('my-sheet open');
    });
    $$('.my-sheet').on('sheet:opened', function(e, sheet) {
        console.log('my-sheet opened');
    });

    // Create dynamic Sheet
    var dynamicSheet = app.sheet.create({
        content: '<div class="sheet-modal">' +
            '<div class="toolbar">' +
            '<div class="toolbar-inner">' +
            '<div class="left"></div>' +
            '<div class="right">' +
            '<a class="link sheet-close">Done</a>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div class="sheet-modal-inner">' +
            '<div class="block">' +
            '<p>Sheet created dynamically.</p>' +
            '<p><a href="#" class="link sheet-close">Close me</a></p>' +
            '</div>' +
            '</div>' +
            '</div>',
        // Events
        on: {
            open: function(sheet) {
                console.log('Sheet open');
            },
            opened: function(sheet) {
                console.log('Sheet opened');
            },
        }
    });
    // Events also can be assigned on instance later
    dynamicSheet.on('close', function(sheet) {
        console.log('Sheet close');
    });
    dynamicSheet.on('closed', function(sheet) {
        console.log('Sheet closed');
    });

    // Open dynamic sheet
    $$('.dynamic-sheet').on('click', function() {
        // Close inline sheet before
        app.sheet.close('.my-sheet');

        // Open dynamic sheet
        dynamicSheet.open();
    });

    // Create swipe-to-close Sheet
    app.sheet.create({
        el: '.my-sheet-swipe-to-close',
        swipeToClose: true,
        backdrop: true,
    });
    // Create swipe-to-step Sheet
    app.sheet.create({
        el: '.my-sheet-swipe-to-step',
        swipeToClose: true,
        swipeToStep: true,
        backdrop: true,
    });
</script>
1 Like

Сравните свой вариант с кодом из kitchen

Да та же версия на кухне v4.5.2

Your code is correct. Did you include correct and latest version of F7’s JS and CSS? I just copy-paste your code and all works correctly

Did it and it worked! thanks!