Headline Desing
セレクトポップアップ
//オプションは、jsonで指定
  nJa_.tpl.hdlhdlhdllist = [
    {"txt":'ベタ塗り見出し',"value":"hdl-bg",},
    {"txt":'右上がり見出し',"value":"hdl-up",},
    {"txt":'囲い枠見出し',"value":"hdl-wrap",},
    {"txt":'吹き出し見出し',"value":"hdl-fuki",},
    {"txt":'吹き出し(ベタ塗り)見出し',"value":"hdl-fukibg",},
    {"txt":'吹き出し(ライン)見出し',"value":"hdl-fukiline",},
    {"txt":'ライン見出し',"value":"hdl-line",},
    {"txt":'左ライン見出し',"value":"hdl-lb",},
    {"txt":'左ライン(W)見出し',"value":"hdl-lbw",},
    {"txt":'インパクト見出し',"value":"hdl-bigccl",},
    {"txt":'飾り見出し',"value":"hdl-wccl",},
    {"txt":'飾り見出し2',"value":"hdl-sqsq",},
  ];

const promise1 = new Promise((resolve, reject) => {
  //セレクトボックス生成して挿入
  //挿入先は、class:"d-none"
  //要素内に直接作成しておいてもOK?nja用に特化して作ったので汎用性が低い

  document.getElementById('headlinetpl').appendChild(nJa_.func.arytoSelect(nJa_.tpl.hdlhdlhdllist,{id:"headtpl",name:"headtpl",class:"d-none",}));
  //おまけ:カラー変更
  document.getElementById('headlinecolor').innerHTML = nJa_.tpl.colorselect;
  resolve();
});

promise1.then((value) => {
  //セレクトボックスをkite化
  $('#headtpl').nJa_kite({
    before: function(){
      let $color = document.getElementById('headlinetpl').getAttribute('data-color');
      document.querySelector('[data-select_id="headtpl"]').classList.add($color);
    }
  });
  //おまけ:カラー変更
  document.getElementById('headlinecolor').innerHTML = nJa_.tpl.colorselect;
  nJa_.func.changeTargetColor('#headlinecolor [name=box-color]','#headlinetpl');
});





jquery selmodal
jquery selmodal
/js/Jquery.selmodal.js

$(function(){
	$('#select').selModal();
});