Dialog 对话框 - jtbc文档 - 吴忠辉的博客

基础用法

J5 Dialog 组件用 alert 、confirm、popup、open、fullpage 等几种方法来打开不同类型的对话框。popup-movable 属性用于设置对话框是否可以拖动；text-ok、text-cancel 用于设置“提示”、“确认”对话框的确认按钮和取消按钮的提示文字。另外还有几个不常用属性

credentials：跨域请求时，是否携带凭证。详情参考：Request.credentials - Web API | MDN
mustache：设置 Dialog 组件预设参数的属性名称，用于通过 "href" 属性、open 方法打开对话框时，替换模板中的变量。在 J5 后台中比较常见这种使用方式。
with-global-headers：设置 open 方法的请求头。

alert 提示对话框

<jtbc-dialog id="jtbc5-dialog" text-ok="确认" text-cancel="取消" plugin_css="/console/common/assets/dialog.css"></jtbc-dialog>
<button class="b2" id="button-dialog-alert">点击打开提示框</button>
<script>
  document.getElementById('button-dialog-alert').addEventListener("click", function(){
     document.getElementById('jtbc5-dialog').alert('您好！', ()=> console.log('大家好！'))
  });
</script>

confirm 确认消息对话框

<button class="b2" id="button-dialog-confirm">点击打开确认对话框</button>
<script>
  document.getElementById('button-dialog-confirm').addEventListener("click", function(){
     document.getElementById('jtbc5-dialog').confirm('您好吗？', ()=> console.log('大家好！'), "好", "不好")
  });
</script>

popup 富文本对话框

<button class="b2" id="button-dialog-popup">点击打开对话框</button>
<script>
let html = `
        <style>.section_main {padding: 10px}</style>
        <div class="section_main">
          <div class="title"><h1>JTBC5 简介</h1></div>
          <p>JTBC(CMS)源自2006年的开源网站内容管理系统解决方案</p>
          <div class="buttons"><button class="ok">关闭对话框</button></div>
        </div>
        `;
  document.getElementById('button-dialog-popup').addEventListener("click", function(){
     document.getElementById('jtbc5-dialog').popup(html, ()=> console.log('大家好！'))
  });
</script>

open 打开网址对话框

open 根据请求网址返回的内容来显示在对话框。支持的格式 json 或 xml，具体需要包含 code 、fragment 字段或节点。条件限制，暂不在线上演示了。

<button class="b2" id="button-dialog-open">点击打开对话框</button>
<script>
  document.getElementById('button-dialog-open').addEventListener("click", function(){
     document.getElementById('jtbc5-dialog').open("https://www.xxxxxx.xx/", ()=> console.log('大家好！'))
  });
</script>

fullpage 全屏对话框

<button class="b2" id="button-dialog-fullpage">点击打开对话框</button>
<script>
  let html = `<h1>JTBC5 简介</h1>
   <p>JTBC(CMS)源自2006年的开源网站内容管理系统解决方案</p>
  `;
  document.getElementById('button-dialog-fullpage').addEventListener("click", function(){
     document.getElementById('jtbc5-dialog').fullpage(html)
  });
</script>