LoCorepowered by LOCONDO

備考欄だけはtableから切り離して別の情報として扱う。
備考欄の編集時はmemo-remodalというclassのついたモーダルを呼び出す。
ここでは他のモーダル処理との区分けの意味で、掲載エリアのスタイルを継承したモーダルが展開される。

HTML

<div class="box">
<h6 class="h6 first">備考
<small class="ml1">※ 得意先には表示されません</small>
<button id="trg-memo-modal" type="button" class="btn btn-outline-secondary btn-sm float-right mt0">備考を編集する</button>
</h6>
<p>
メモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモ<br>
メモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモ
</p>
</div>

modal側

<div class="remodal memo-remodal" data-remodal-id="memo-remodal" data-remodal-options="hashTracking: false">
<h6 class="h6 first">備考
<small class="ml1">※ 得意先には表示されません</small>
<small class="float-right">[200桁]</small>
</h6>
<textarea rows="5" class="inline90" maxlength="220" id="caution" name="caution">メモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモ
メモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモメモ</textarea>
<br>
<button type="button" data-remodal-action="cancel" class="btn btn-outline-secondary" style="width:30%;">キャンセル</button>  <button type="button" data-remodal-action="confirm" class="btn btn-primary" style="width:30%;">更新する</button>
<!--<p><small>サーバの通信が発生することなど何か注意文が必要であればここにウンタラカンタラ</small></p>-->
</div>

jqeryでのモーダル呼び出し(ここは適当に既存開発中のlocondo.modalで呼び出してください。)

$('#updateOrderBtn').click(function () {
	$('[data-remodal-id=update-remodal]').remodal().open();
});