demo-simple-dialog

demo-simple-dialog1.html

<button id="bt-demo1" class="bt-demo">デモボタン1</button>
<p>オプション指定無し。</p>

demo-simple-dialog1.js

const dialog1 = new simpleDialog();
document.getElementById('bt-demo1').addEventListener('click',()=>{
  dialog1.display();
});

demo-simple-dialog2.html

<button id="bt-demo2" class="bt-demo">デモボタン2</button>
<p>一通りのオプションを指定。</p>

demo-simple-dialog2.js

const dialog2 = new simpleDialog({
  str_head: '2番目のダイアログ',
  str_body: '改行したい場合は\n\\nを挿入する。',
  str_ok: 'はい',
  str_cancel: '閉じる',
  num_bt: 2
});
document.getElementById('bt-demo2').addEventListener('click',()=>{
  dialog2.display();
});

demo-simple-dialog3.html

<button id="bt-demo3" class="bt-demo">デモボタン3</button>
<p>ボタンを横並びにする。</p>

demo-simple-dialog3.js

const dialog3 = new simpleDialog({
  str_head: '3番目のダイアログ',
  str_body: 'Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
  num_bt: 2,
  direction_footer: 'row'
});
document.getElementById('bt-demo3').addEventListener('click',()=>{
  dialog3.display();
});

demo-simple-dialog4.html

<button id="bt-demo4" class="bt-demo">デモボタン4</button>
<p>
  押されたボタンにより処理を分岐させる。<br>
  <span id="output4" class="t-bold"></span>
</p>

demo-simple-dialog4.js

const dialog4 = new simpleDialog({
  str_head: '4番目のダイアログ',
  str_body: 'Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
  num_bt: 2,
  onClose: funcDemoClose4,
  onOk: funcDemoOk4,
  onCancel: funcDemoCancel4
});
document.getElementById('bt-demo4').addEventListener('click',()=>{
  dialog4.display();
});
function funcDemoClose4(){
  document.getElementById('output4').textContent = '閉じられました。';
}
function funcDemoOk4(){
  document.getElementById('output4').textContent = 'OKが押されました。';
}
function funcDemoCancel4(){
  document.getElementById('output4').textContent = 'CANCELが押されました。';
}

demo-simple-dialog5.html

<button id="bt-demo5" class="bt-demo">デモボタン5</button>
<p>タイトル及び本文にHTML要素を入れる。</p>

<div id="dialog-head5" style="color: #8E44AD;">タイトル要素</div>
<div id="dialog-body5">
  <p style="color: #3498DB;">
    段落1
  </p>
  <p style="color: #E74C3C;">
    段落2
  </p>
  <img src="/img//sample01.jpg" alt="いちご、りんご、レモンなどの果物が並ぶ写真。" style="width: 30%;">
</div>

demo-simple-dialog5.js

const dialog5 = new simpleDialog({
  element_head: document.getElementById('dialog-head5'),
  element_body: document.getElementById('dialog-body5'),
  num_bt: 2
});
document.getElementById('bt-demo5').addEventListener('click',()=>{
  dialog5.display();
});

demo-simple-dialog6.html

<button id="bt-demo6" class="bt-demo">デモボタン6</button>
<p>
  各値を後から追加する。<br>
  <span id="output6" class="t-bold"></span>
</p>
<div id="dialog-body6">
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
  吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。<br>
  この書生というのは時々我々を捕えて煮て食うという話である。
</div>

demo-simple-dialog6.js

const dialog6 = new simpleDialog();
dialog6.setStrHead('6番目の\nダイアログ');
dialog6.setElementBody(document.getElementById('dialog-body6'));
dialog6.setOnClose(funcDemoClose6);
dialog6.setOnOk(funcDemoOk6);

document.getElementById('bt-demo6').addEventListener('click',()=>{
  dialog6.display();
});

function funcDemoClose6(){
  document.getElementById('output6').textContent = '閉じられました。';
}
function funcDemoOk6(){
  document.getElementById('output6').textContent = 'OKが押されました。';
}

howto.js

const element = document.createElement('div');
const func = ()=>{console.log('sample function')};

const option = {
  str_head: 'string',  //dialog head text
  element_head: element,  //element in dialog head
  str_body: 'string',  //dialog body text
  element_body: element,  //element in dialog body
  direction_footer: 'column',  //button direction (column or row)
  str_bt_ok: 'string',  //ok button text
  str_bt_cancel: 'string',  //cancel button text
  num_bt: 1,  //num of button (1 or 2)
  onDisplay: func,  //function after dialog display
  onClose: func,  //function after dialog close
  onOk: func,  //function after dialog ok
  onCancel: func,  //function after dialog cancel
};

const dialog = new simpleDialog(option);

dialog.setStrHead('string');  //set dialog head text
dialog.setElementHead(element);  //set element in dialog head 
dialog.setStrBody('string');  //set dialog body text
dialog.setElementBody(element);  //set element in dialog body 
dialog.setStrOk('string');  //set ok button text
dialog.setStrCancel('string');  //set cancel button text
dialog.setOnDisplay(func);  //set function after dialog display
dialog.setOnClose(func);  //set function after dialog close
dialog.setOnOk(func);  //set function after dialog ok
dialog.setOnCancel(func);  //set function after dialog cancel

dialog.display();
dialog.close();
dialog.ok();
dialog.cancel();