SweetAlert - Zmień szerokość modalną?

Question

Uwielbiam tę bibliotekę. Chciałbym go użyć do wyświetlania tabeli umiarkowanej odpowiedzi na jednej z moich stron internetowych, ale tekst jest trochę szeroki. Miałem nadzieję, że istnieje opcja zmiany szerokości ogólnego alertu dla strony, na której wyświetlam tabelę w SweetAlert, ale nie mam szczęścia. Tabela & HTML wygląda świetnie, po prostu za dużo informacji o modalu.

Nie mogę nawet znaleźć, gdzie szerokość jest ustawiona w ogólnym sweetalert.css.

Myślałem, że może kluczem Configuation CustomClass może pomóc i próbowałem:

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

css to tylko prosta:

.swal-wide{ 
    width:850px; 
} 

To nic nie zrobił. Ktoś ma pomysł, jak to zrobić, lub może bawił się z elementem szerokości?

Dziękujemy!

Answer 1

spróbować umieścić !important jak to w css:

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

Zobacz pracuje we fragmencie.

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>

Uwaga: być może masz problemy ze stanowiska.

Answer 2

Nazwa klasy modemu SweetAlert to alarm słodki. Tak więc, jeśli chcesz zmienić jego szerokość, prawidłowy kod CSS:

.sweet-alert { 
     width: 850px; 
} 

ten pracuje z SweetAlert 1.1.3

Answer 3

Zamiast nadpisywania domyślnego .sweet-alert klasę css można zdefiniować własne

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

niż tylko korzystać z opcji sweetalert ustawić klasę tylko do tych wpisów, które chcesz mieć szeroki:

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

PS (aktualizacja): Być może trzeba zmienić sweetalert Klasa A mało to właściwie centrum:

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

Here is jsbin go wypróbować

Answer 4

Lepsze wykorzystanie SweetAlert2 który jest następcą SweetAlert. Po prostu dodaj właściwość "width", jak:

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

Answer 5

Po prostu użyj width, tj.:

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

---

Sweet Alert2 Docs