Estoy usando Tailwind CSS para estilos. A continuación se muestra el archivo html.

Archivo HTML

 //modal 1 <div class="modal fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50 " > <div class="modal-container absolute flex min-w-full lg:px-8 xl:px-24"> <div class="modal-info bg-white min-w-full lg:w-8/12 lg:rounded-lg overflow-y-scroll p-0 relative" ></div> //modal 2 <div class="modal fixed top-0 left-0 bottom-0 right-0 bg-black bg-opacity-40 z-50" > <div class="absolute center bg-white w-4/5 landscape:w-2/5 lg:auto rounded-lg px-6 py-4 lg:py-8 text-center" ></div> </div> <a href="#" class="modal-close hidden md:block ml-4 lg:-ml-4 lg:-mt-4 xl:ml-4 xl:mt-0 relative z-50" ><svg width="35" height="35" fill="none" xmlns="http://www.w3.org/2000/svg" ><rect width="35" height="35" rx="5" fill="#fff" /> <path d="M11.293 11.293a1 1 0 011.414 0L18 16.586l5.293-5.293a1 1 0 011.414 1.414L19.414 18l5.293 5.293a1 1 0 01-1.414 1.414L18 19.414l-5.293 5.293a1 1 0 01-1.414-1.414L16.586 18l-5.293-5.293a1 1 0 010-1.414z" fill="#0D0D0D" /></svg ></a > </div> </div>

Cuando trato de mostrar el html anterior, Modal 2 no cubre toda la pantalla y todavía se puede hacer clic en la etiqueta de cierre modal.