Help with reducing Modal from full page to smaller

JavaScript
1

The modal box I’m testing covers the whole page upon selecting “open modal” button.
I’ve looked around the code to see how/where I can reduce from full page modal without success. in the modalbox.js I see this section, and tried changing from 100% to 50%, but didn’t see a change.

    let openModal=function(data){
        let dialog_id = $(this).attr("data-dialogId");
        let $this = $(this);
        let $modalOverlay=$(".myOwnDialog_overlay"+dialog_id);
        let dialog_auto_close = $(this).attr("data-dialogAutoClose");

        if ($modalOverlay.length===0) {
            $("body").prepend("<div class=\"myOwnDialog_overlay" + dialog_id + "\"></div>");
            $modalOverlay=$(".myOwnDialog_overlay"+dialog_id);
            $modalOverlay.css(
                {
                    "position": "fixed",
                    "background-color": "black",
                    "width": "100%",
                    "height": "100%",
                    "opacity": "0.5",
                    "left": "0",
                    "top": "0",
                    "right": "0",
                    "bottom": "0",
                    "display": "block"
                });
        }

        $(this).fadeIn(400,function(){
            if(typeof data.settings.afterOpenedCallback==="function")
            {
                if(data.settings.afterOpenedCallback)
                {
                    data.settings.afterOpenedCallback();
                }
            }

if you need additional code to help me figure this out, let me know, I look forward to all suggestions/clues/guidance.

2

If you change the width and height to 50% then the size should be reduced.
e.g.

I just added margin:auto to centre it.

Alternatively as well as changing the width and height to 50% you may also need to change the top, left, right and bottom co-ordinates to 25% also but in theory you shouldn’t need to unless there is something else going on I can’t see.

If that doesn’t work then we’d need to see an example in case there is other code interfering :slight_smile:

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.