Search code examples
sweetalert

sweetalert 2 target a div rather than entire window?


Is it possible to target a div rather than the entire window for SweetAlert2?

If not is is possible to edit the center coordinates?

The reason I ask is that I have a few JavaScript games that i would like to use this framework with. these are loaded in <div>'s which are not centered on the page. The sweet alert popup looks strange when it opens as it is miss-aligned.

This is fine for mobile games but not for browser based.

Any help would be great :)


Solution

  • Here you go:

    Swal.fire({
      title: 'I will be placed inside the #swal2-container',
      target: document.getElementById('swal2-container')
    })
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <div id="swal2-container"></div>

    SweetAlert2 documentation: https://sweetalert2.github.io/