fancybox

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css">
  <style>
    #modal, #modal2 {
        display: none;
        width: 100%;
        max-width: 600px;
        padding: 0 0 40px 0;
        text-align: justify;
        border-radius: 3px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
  </style>
</head>
<body>

    <a data-fancybox data-touch="false" href="#modal" class="btn btn-primary">Open demo</a>

    <div id="modal">
        <button id="btn">открыть окно 2</button>
    </div>

    <div id="modal2">
        окно 2
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
    <script>
        $(function(){
            $("#btn").on('click', function(){
                $.fancybox.close()
                $.fancybox.open({
                    src: '#modal2',
                    type: 'inline',
                });
            })
        });
    </script>

</body>
</html>