ダイアログボックスが表示されない

Question

フォームを書いていますが、フォーム部分が完成しましたが、テキストを表示するためのポップアップダイアログボックスを表示する必要があります。私はajaxと.loadを使ってtxtファイルをインポートしようとしましたが、コードを隠すだけで使いやすくなると思います。添付されたdivは私がポップアップしたい、テキストはpタグの中にあります。

<div class="container" id="dialog" style="display:none"> 
     <p></p> 
    </div> 

<div class = "container"> 
    <div class="form-group row"> 
     <section class="col-xs-2"> 
      <div class="form-check"> 
       <input class="form-check-input disabled" type="checkbox" style="margin-right:10px"> 
       <label class="form-check-label">I Agree to Terms 
       </label> 
      </div> 
     </section> 
     <section class="col-xs-10" style="margin-left:-25px"> 
      <button class = "btn" style="background:transparent;border:none!important" id="Show">Show Me!</button>      
     </section> 
    </div> 
</div> 

これは#Showがクリックされたときは、Ajaxを使って行うことができますjQueryの

$(document).ready(function(){ 

var dialog = $("#dialog"); 

dialog.dialog({ 
    title: "Dialog", 
    modal: true, 
    draggable: false, 
    resizable: false, 
    autoOpen: false, 
    width: 500, 
    height: 400 
}); 

$('#Show').click(function() { 
    dialog.show(); 
    dialog.dialog("open"); 
}); 

$(document).on('click', ".ui-widget-overlay", function() { 
    dialog.dialog("close"); 
}); 
}); 

Answer 1

です。

test.txtの

You must agree this fact 
1. 
2. 
3. 

アヤックス成功機能

$('#Show').click(function() { 
    $.ajax({ 
      url: "test.txt",    
      success: function (data){ 
       dialog.find("p").html(data); 
       dialog.show(); 
       dialog.dialog("open"); 
      } 
     }); 
});