Creating responsive modal

Creating modal dialog window is easy, you need one button/link, few lines of HTML code, some css, and javascript call to opet and close it.

Button:
<button id="prijavadugme" type="submit" class="dugme single_add_to_cart_button button alt">Prijavi se</button>


HTML part:
<div id='dialogu' class="notify tltc ">
            <div id='dialoger'>
                <div id="modal" class="foodform">
                    <div id="datetexti">
                                 Put your text or HTML here
                    </div>
                    <div id="concnotif">
                        </div>
                         <div class="buttonari cancela">
                            <p class="cart_navigation roundbutton showme">
                                <a id='closeding' href="#" class="button_large" title="Cancel">X</a>

                            </p>
                        </div>
                </div>
            </div>
        </div>

Javascript part:
<script type="text/javascript">
           
         function ShowAlert() {
            var vtop =  $(window).scrollTop(); /*Get document position*/
            $('#dialoger').css("top", vtop+80); /*Set modal position, important for big dialog on mobile*/
            $('#dialogu').show();
        }

        $(document).ready(function () {

            $("#prijavadugme").click(function() {
             
                ShowAlert();
            })
         
            $("#dialoger #closeding").click(function (e) {
                e.preventDefault();
                $("#dialogu").hide();
            });
        });

        </script>


CSS part:

.notify #dialoger #modal {
    background:white;
    border: solid 2px #c4b173;
}

.notify input.goldbord {
    color:#c4b173;
    text-align:center;
    padding:10px;
}

.notify  .buttonari.cancela {
    position: absolute;
    top: -20px;
    right: -20px;
}

.notify  .cancela  p.cart_navigation a.button_large {
    padding-left:15px;
    padding-right:15px;
}
div#datetexti {
    padding: 20px;
}


#dialoger #content {
    border-radius:8px;
    background:#fff;
    padding:20px;
}

@media (max-width: 480px) {

    #dialoger #modal {
        position: relative;
        background: url(tint20.png) 0 0 repeat;
        background: #c4b173;
        border-radius: 0px;
        padding: 8px;
        z-index: 900;
        padding: 1px;
        min-width: 260px;
    }
}
#dialogu  {
    display:none;
}

#dialoger {
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 2;
    top: 10%;
    left: 50%;
    right: 50%;
}



#dialoger p.cart_navigation a.button_large, form p.submit input:hover, #add_address p.submit2 input{

    border: 1px solid #C4B073;


}

#dialoger #close {
    position:absolute;
    background:url(close.png) 0 0 no-repeat;
    width:24px;
    height:27px;
    display:block;
    text-indent:-9999px;
    top:-7px;
    right:-7px;
}