ブートストラップで構成可能なモーダル ウィンドウを構築しようとしています。私の意図は、作成関数の引数によってモーダルを動的に埋めることです。
1 つのパラメーターはヘッダーのタイトル ( titolo
)、2 番目 ( messaggio
) は HTML またはプレーン テキストのモーダル本文のテキスト、3 番目 ( conferma
) は確認ボタン (この関数が存在する場合に作成される) の場合に呼び出される関数です。がクリックされ、forth( callback
) は、モーダル ウィンドウが閉じられた場合に呼び出されるコールバック関数です。
残念ながら、私はそれを機能させることができません、私を助けてくれますか?
function apriModal(titolo,messaggio,conferma,callback){
jQuery.noConflict();
var re=new RegExp("</?\w+\s+[^>]*>");
$("#modalHeaderTitle").text(titolo);
if(messaggio.match(re)){
$("#modalBodyText").html(messaggio);
}
else{
$("#modalBodyText").html("<p>"+messaggio+"</p>");
}
(typeof conferma == 'function') ? $("#modalConfirm").show() : $("#modalConfirm").hide();
$("#finestraModal").modal('show');
$("#modalConfirm").click(function(){
if(conferma){
$("#finestraModal").modal('hide');
conferma.apply();
}
});
$("#modalClose").click(function(){
if(callback){
callback.apply();
}
$("#finestraModal").modal('hide');
});
}
モーダルの基本的な html は次のとおりです。
<div id="finestraModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="modalHeaderTitle"></h3>
</div>
<div class="modal-body" id="modalBodyText">
</div>
<div class="modal-footer">
<a href="#" id="modalClose" class="btn">Chiudi</a>
<a href="#" id="modalConfirm" class="btn btn-primary">Conferma</a>
</div>
</div>