CODEWITHSUNDEEP
javascriptgoogle-mapsz-indexsweetalertsweetalert2
rjj
rjj

Reputation: 53

How do I force Sweet Alert 2 to fire over Google Map while the map is full screen?

I have an application that uses Google Maps. I'm using Sweet Alert 2 for js confirmations. I'm not having a problem firing Sweet Alert dialogs as long as the Google Map is NOT in full screen mode. However, when Google Maps in in full screen mode, the dialog fires but is not visible until I exit full screen mode.

I had a similar issue with bootstrap modal, and I resolved it by setting the z-index on the modal containers. I thought that I could do the same with Sweet Alert 2, but it is not working.

below is the js used to fire the swal:

Swal.fire({
    title: 'Are you sure you want to delete this point?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!',
    customClass: {
        container: 'my-swal'
    }
}).then((result) => {
    ...
});

and this is the css:

.my-swal {
    z-index: 2147483600;
}

In addition to the code above I've also tried just applying the z-index to the default Sweet Alert 2 container class "swal2-container" and not specifying a customClass on fire. This did not work either.

The interesting thing is, for both examples, when I inspect the page, it shows that the z-index of the container is set to what I've specified, but the alert is still not visible. And again, this same solution is applied to Bootstrap Modal containers on the page and working fine.

Any suggestions would be appreciated :)

Upvotes: 1

Views: 2675

Answers (2)

Dyuko Irala
Dyuko Irala

Reputation: 56

To achieve this, you need to create a div element within the map controls and then configure SweetAlert2 to target that specific div.

Create the div in the map controls:

const divLoading = document.createElement('div');
divLoading.id = 'swal-target';
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(divLoading);

Configure SweetAlert2 to target the specific div:

    showSpinner(title: string, message: string) {
        Swal.fire({
            title: title?.toUpperCase(),
            html: message,
            allowOutsideClick: false,
            showConfirmButton: false,
            target: document.getElementById('swal-target'),
            didOpen: () => {
                Swal.showLoading();
            }
        });
    }

Upvotes: 0

krirk luangratchapan
krirk luangratchapan

Reputation: 11

I Struck this too T^T. i have use map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); to add DIV in google map but alert, popup , sweet alert cannot add to googlemap i have trick to make div modal boostrap to do like alert and add in googlemap ( https://developers.google.com/maps/documentation/javascript/controls ) ( https://developers.google.com/maps/documentation/javascript/examples/control-positioning ) ( https://developers.google.com/maps/documentation/javascript/controls )

today i found this it's seem build DIV and let Sweetalert target to DIV if we can builld DIV and add DIV to map and Target Sweet to DIV
maybe it's work but now i still not try this. ( SweetAlert2 inside a div )

now i try it's work !

enter image description here

Upvotes: 1

Related Questions