大二部门老师逼着学了一年都没搞懂，我糊里糊涂到现在才自己会运用。
贴一个生成“土味情话”的小案例。
截取部分代码。
效果图

image.png

image.png

点击“确定就能关闭弹出框”

html

<div align="center">
                     <h1 >土&nbsp;味&nbsp;情&nbsp;话</h1>
                     <br>
                     <p>甜/到/腻/嘴，撩/到/心/氧</p>
                     <br>
                     <input type="button" value="生&nbsp;&nbsp;成" id="btn_sc" onClick="btn_sc()"/>
                     </div>
</div>

<!--弹出对话框，生成土味情话-->
<div align="center" id="twqh_tck">
               <div id="project_list"></div>
               <input type="button" value="确&nbsp;&nbsp;定" id="btn_ok">
</div>

jQuery（引用 jquery-3.4.1.min.js）

<script>
$(document).ready(function(){
  $("#btn_sc").click(function(){
      $("#twqh_tck").css("display","block");
         $.get("http://api.tianapi.com/txapi/saylove/index?key=xxxxxxxxxx",
         //接口的key要自己去申请
    function(data,status){  
        var listdata=data.newslist; //列表数据  
      if(listdata.length>0){ //项目列表
           var listInfo=""; 
              $.each(listdata,function(){
                 listInfo+="<li class='mui-table-view-cell mui-media' style='list-style-type:none;'>"+
                 "<div class='mui-media-body' style='margin-top:30%;margin-left:5%; margin-right:5%'>"+
                 "<p class='project-name' style='font-size:24px'>"+this.content+"</p>"+
                 "</div>"+  
                 "</li>";
              });

           $("#project_list")[0].innerHTML=listInfo;    
      }
        
    });
  });
  $("#btn_ok").click(function(){
      $("#twqh_tck").css("display","none");
      });
});
</script>

css样式

#twqh_tck{
    display:none;
     background:#FFF;
     position:absolute;
        z-index:1;
        width:40%;
        height:75%;
        border-radius:10px;
         box-shadow: 2px 4px 6px #333;
        top:10%;
        left:30%;
    }

ps：使用接口时也存在点击“生成”过快，而刷新内容不及时的问题，考虑加上按钮强制冷却时间来解决这个问题。