对话框不出现

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> 

这是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

您可以使用Ajax要做的就是点击#Show时。

的test.txt

You must agree this fact 
1. 
2. 
3. 

使用Ajax成功功能

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