web-dev-qa-db-ja.com

SweetAlert-モーダル幅を変更しますか？

このライブラリが大好きです。 Webページの1つに中程度の応答テーブルを表示するために使用したいのですが、テキストが少し広くなります。 SweetAlert内でテーブルを表示しているページのアラート全体の幅を変更するオプションがあることを望んでいましたが、運がありません。テーブルとHTMLは見栄えがよく、モーダルには情報が多すぎます。

Sweetalert.css全体のどこに幅が設定されているかさえわかりません。

私はおそらくcustomClass構​​成キーが役立つかもしれないと思って、試しました：

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

CSSは単純なものでした。

.swal-wide{
    width:850px;
}

これは何もしませんでした。誰もこれを行う方法のアイデアを持っていますか、おそらく幅要素で遊んでいますか？

ありがとうございました！

javascripthtmlcsssweetalert
17
Watercayman

!important cssで次のようになります。

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

スニペットで動作することを確認してください。

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>

注：ポジションに問題があるかもしれません。

25
Joel R Michaliszen

width: '800px'

すなわち：

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

Sweet Alert2 Docs

7
Pedro Lobito

デフォルトの.sweet-alert cssクラスを上書きするのではなく、独自に定義できます

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

Sweetalertオプションを使用して、幅を広げたいアラートのみにクラスを設定するだけではありません。

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

PS（更新）：適切にセンタリングするには、sweetalertクラスを少し変更する必要がある場合があります。

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

こちらはjsbinです 試してみる

4
Buksy

簡単な解決策は、以下のCSSを追加することです。参照： スイートアラート2モーダルショーが小さすぎる

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

より良い使用 SweetAlert2 これはSweetAlertの後継です。次のような「幅」プロパティを追加するだけです。

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

ここでの答えはどれも役に立たなかった。私がしなければならなかったのは、（文字列なしで）整数として幅の値を追加し、「px」接尾辞を削除することだけでした。

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

SweetAlertモーダルのクラス名はsweet-alertです。したがって、幅を変更する場合、正しいCSSコードは次のとおりです。

.sweet-alert { 
       width:  850px;   
}

これはSweetAlert 1.1.3で動作しています

0
Lurai