これは私が使用しているブートストラップ通知設定です:
var options = {
title: title,
message: message
};
var settings = {
element: "#page-wrapper",
position: "fixed",
type: type,
placement: {
from: "top",
align: "center"
},
z_index: 3000,
animate: {
enter: "animated fadeInDown",
exit: "animated fadeOutUp",
},
template:
"<div data-notify="container" role="alert" class="col-xs-11 col-sm-8 alert alert-{0}" style="margin: 15px 0 15px 0">
<button type="button" class="close" data-notify="dismiss">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<span data-notify="icon"></span>
<span data-notify="title">{1}</span>
<span data-notify="message" style="padding-right:15px">{2}</span>
<a href="{3}" target="{4}" data-notify="url"></a>
</div>"
};
$.notify(options, settings);
ページにメッセージがあふれないように、ページに表示されるメッセージの最大数をいつでも設定したい。
回答:
回答№1は1template:
"<div data-notify="container" role="alert" class="col-xs-11 col-sm-2 alert alert-{0}" style="margin: 15px 0 15px 0; width: 150px;">
<button type="button" class="close" data-notify="dismiss" style="top:7px;">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<span data-notify="icon"></span>
<span data-notify="title">{1}</span>
<span data-notify="message" style="padding-right:15px">{2}</span>
<a href="{3}" target="{4}" data-notify="url"></a>
</div>"
スタイルに幅を追加すれば大丈夫です!