Click here to Skip to main content
15,847,427 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i am using swal popup. but it's open big popup.

i dont no how to set height of swal alert.

What I have tried:

<script src="~/Dist/sweetalert.min.js"></script>
<link href="~/Dist/sweetalert.css" rel="stylesheet" />


<a class="btn btn-success block" id="BlockUnblockBtn" onclick="BlockUnblock(this,event);">Block</a>



function BlockUnblock(ctl, event) {
      swal({
          title: "Are you sure?",
          text: "You will not be able to recover this imaginary file!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          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");
              }
          });
  }
Posted
Updated 12-Sep-17 1:20am
Comments
Mehdi Gholam 12-Sep-17 5:58am    
swal() auto sizes to fit the contents you provide and the styling is standard, why do you say it is too big?

Add "customClass" propery on your swal like:
JavaScript
customClass: swal-size-sm

Then create CSS:
CSS
.swal-size-sm 
{
   width: 200px !important;
}

...don't forget the "!important" so that it would overwrite the default size of swal. ^_^
 
Share this answer
 
use ClassName[^] property

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>     
    <style>
        .myClass{
            width:400px;
            height:200px;
        }
    </style>
</head>
<body>

    <script>
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!", 
            className: "myClass",
        });
    </script>

</body>

</html>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900