モーダルを表示できません

Question

モーダルの表示方法を改善するために私のコードを変更しましたので、私のモーダルの色（プライマリ、警告、危険など）を変更して自分のウェブサイトの映像を改善することができます。私のモーダルはこれまでに働いていましたが、メインのモーダルdivを削除してモーダルを表示するJSに配置したので、モーダルに表示される内容に応じてクラスを簡単に変更できるようになりました。画面はフェードアウトしますが、モーダルボックスは表示されません。どのように私はこれを修正することができますの提案を誰も持っていますか？私はさまざまなことを自分で試みましたが、この問題のオープンタグや明白な原因は見つけられません。前もって感謝します。

HTML

<!-- Modals Containers --> 
<div id="mdlGeneral"></div> 

JS

$("#mdlGeneral").html('<div class="modal modal-danger fade" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">'+Username+' - Ban User</h4></div><div class="modal-body"><p>Are you sure you wish to suspend <strong>'+Username+'</strong> from the Cadet Portal?</p><div id="divBanUserError"></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button><button type="button" class="btn btn-primary" onClick="BanUser(\''+Username+'\',\''+Page+'\')">Yes</button></div></div></div></div>'); 
$("#mdlGeneral").modal("show"); 

Answer 1

ブートストラップまたは類似のライブラリを使用していると仮定すると、あなたはすなわち、先頭の要素へのモーダルクラスを追加する必要があります

<div id="mdlGeneral" class="modal modal-danger fade" tabindex="-1" role="dialog"></div> 

JSでは、

$("#mdlGeneral").html('<div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">'+Username+' - Ban User</h4></div><div class="modal-body"><p>Are you sure you wish to suspend <strong>'+Username+'</strong> from the Cadet Portal?</p><div id="divBanUserError"></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button><button type="button" class="btn btn-primary" onClick="BanUser(\''+Username+'\',\''+Page+'\')">Yes</button></div></div></div>'); 
$("#mdlGeneral").modal("show"); 

クラスを変更する場合は、jQueryでも.addClass() and removeClass()メソッドがあります。

編集：

もう一つの方法は、おそらく単純：

$("#mdlGeneral > div").modal("show");