CODEWITHSUNDEEP
jquerytwitter-bootstrap-3sweetalert
A. Hasemeyer
A. Hasemeyer

Reputation: 1734

SweetAlert not showing in Modal

I am trying to use SweetAlerts in my .Net Core project and it is not behaving properly. From looking at their documentation it doesn't look like you need to define the modal or where it pops up at all. However, when I use it, it never pops up in a modal but will display in the bottom left corner of my screen under everything.

enter image description here

I tried moving it all the way to the Layout of my application to see if the layers were causing issue, but no matter where I put the code it always ends up in that bottom left corner.

Here is a snippet of my code.

@RenderBody()

<button id="testbutton">TEST</button>
<script src="~/lib/sweetalert/dist/sweetalert.min.js"></script>
<script>
    var SweetAlert = function () { };

    //examples
    SweetAlert.prototype.init = function () {

        //Parameter
        $('#testbutton').on('click', function (e) {
            swal({
                title: "Are you sure?",
                text: "You will not be able to recover this imaginary file!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#f0c541",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel plx!",
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {
                    swal("Deleted!", "Your imaginary file has been deleted.", "success");
                } else {
                    swal("Cancelled", "Your imaginary file is safe :)", "error");
                }
            });
            return false;
        });
    }

    $.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert;

    $.SweetAlert.init();
</script>

Upvotes: 0

Views: 1977

Answers (1)

Mohamad Fazel Hesari
Mohamad Fazel Hesari

Reputation: 116

It seems that you haven't loaded the css file of sweat alert, or if it's not the problem check out your own css styles and see the conflict reason.

Upvotes: 1

Related Questions