SweetAlert - Change Modal Width?

问题

I love this library. I'd like to use it to display a moderate response table on one of my web pages, but the text gets a little wide. I was hoping there was an option to change the width of the overall alert for the page that I'm displaying the table within SweetAlert, but I'm not having any luck. Table & HTML look great, just too much info for the modal.

I can't even find where the width is set in the overall sweetalert.css.

I thought maybe the customClass configuation key might help and I tried:

swal({
       title: priorityLevel +' Issues for '+appName,
       html: appHTML,
       type: "info",
       customClass: 'swal-wide',
       showCancelButton: true,
       showConfirmButton:false
   });

The css was just a simple:

.swal-wide{
    width:850px;
}

This didn't do anything. Anyone have an idea of how to do this or perhaps have played around with the width element?

Thank you!

回答1:

try to put !important like this in the css:

.swal-wide{
    width:850px !important;
}

See it working in the snippet.

function TestSweetAlert(){
    swal({
       title: 1 +' Issues for test',
       text: "A custom <span style='color:red;'>html</span> message.",
       html: true,
       type: "info",
       customClass: 'swal-wide',
       showCancelButton: true,
       showConfirmButton:false
   });
};

$('#testeSWAL').on("click",TestSweetAlert);

.swal-wide{
    width:850px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>


<button id="testeSWAL"> Test SWAL </button>

Note: maybe you will have problems with the position.

回答2:

On the most recent versions you can use:

width: '800px'

i.e.:

swal({
    title: "Some Title",
    html: "<b>Your HTML</b>",
    width: '800px'
})

---

Sweet Alert2 Docs

回答3:

Rather than overwriting default .sweet-alert css class you can define your own

.sweet-alert.sweetalert-lg { width: 600px; }

Than simply use sweetalert options to set your class only to those alerts you want to be wide:

swal({
  title: "test",
  text: "Am I wide?",
  customClass: 'sweetalert-lg'
});

PS (update): You may need to change sweetalert class a little to center it properly:

.sweet-alert { margin: auto; transform: translateX(-50%); }

Here is jsbin to try it out

回答4:

Better use SweetAlert2 which is a successor of SweetAlert. Just add "width" property, like:

swal({
   title: priorityLevel +' Issues for '+appName,
   html: appHTML,
   type: "info",
   customClass: 'swal-wide',
   showCancelButton: true,
   showConfirmButton:false,
   width: '850px'
});

回答5:

A simple solution is to add the below CSS. reference: Sweet alert 2 modal shows too small

.swal2-popup { font-size: 1.6rem !important; }

回答6:

None of the answers here worked for me. All I had to do was add the width value as an integer (without strings) and remove the 'px' suffix.

swal({
       width: 400,
       html: data,
       showCancelButton: true,
       showConfirmButton:false,
       cancelButtonText: "Close",
});

回答7:

The class name for SweetAlert modal is sweet-alert. So, if you want to change its width, the correct CSS code is:

.sweet-alert { 
       width:  850px;   
}

This is working with SweetAlert 1.1.3

回答8:

Also you can add to the HTML head the Style:

        .swal-modal {
        width: 1000px;
        }

This work for me. Hope this helps

回答9:

Tried Everything , none Worked. The Only Thing which worked for me was to add a classname instead of custom class

In your js

swal({
       title : "More Data",
       className: "myClass"
     });

In Your Css

.myClass{
            width:600px;
            height:auto;
        }

来源：https://stackoverflow.com/questions/34520569/sweetalert-change-modal-width