Simple dialog / list dialog in javascript using jquery & bootstrap

(async ()=>{ alert2(await showlist("select number",[1,2,3,4,5])); })()


First, include jquery and bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script crossorigin="anonymous" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

then, put the following in a script tag

alert2=(pgText,cvtBR,asText)=>{
  if(pgText && typeof(pgText)=="object")
    pgText=JSON.stringify(pgText,null,1);

  pgText+="";
  if(cvtBR && !asText)
    pgText=pgText.split("\n").join("<br>");

  var dlg=$(`<div>`)
          .css("position","fixed")
          .css("width","80vw")
          .css("height","80vh")
          .css("left","10vw")
          .css("top","5vh")
          .css("background-color","#38383c")
          .css("color","white")
          .css("overflow-wrap","break-word")
          .css("border-radius","20px")
          .css("font-size","20px")
          .css("padding","10px")
          .css("overflow","auto")
          .attr("onclick","$(this).remove()");
  if(asText)
    dlg[0].innerText=(pgText);
  else
    dlg.html(pgText);
  $("body").append(dlg);
};

showlist=async (title,list,multi)=>{
  if(typeof(list)=="string")
    {
      list=list.split(",");
    }

  if(!list) return "";

  return (await new Promise(resolve=>{

  showlist_resolve=resolve;

  alert2(`<h3 class="alert alert-success text-center">
${title}</h3>
\n`+
  `<ul class="list-group">\n`+
  `
<li class="list-group-item list-group-item-danger text-center">取消Cancel</li>
`+
  list.map(i=>(`
<li class="list-group-item list-group-item-info" onclick="showlist_resolve(this.innerHTML);">${i}</li>
`)).join("\n")+
  `</ul>
`);

  })); //new Promise
};