msbox v1.0.4

MSBox

MSBoxはシンプルなモーダル表示のjsライブラリです。

使用方法

npmでのダウンロード

$ npm i msbox

ファイル読み込み

css読み込み

<link rel="stylesheet" href="./src/css/msbox.min.css">

JavaScript読み込み

<script src="./src/js/msbox.js"></script>

node.jsを使用して読み込み

window.MSBox = require('msbox');

最もシンプルなモーダル表示方法

<script>
  let msbox = new MSBox();
  msbox.open();
</script>

デフォルトでは画面全体を覆うようにして、モーダルが表示されます。

モーダルの内容変更

<script>
  let msbox = new MSBox({
      contentHtml: '<span>始めまして、S-MSBox!!</span>',
  });
  msbox.open();
</script>

contentHtmlオプションにHTML要素を設定することで、そのHTML要素をモーダル内に表示可能です。

対象DOM要素を覆うモーダル表示方法

<div id="target" style="position: relative;">
    適用範囲
</div>
<script>
  let msbox = new MSBox({
      target: $('#target'),
      position: 'absolute',
  });
  msbox.open();
</script>

オプションとしてtargetを指定することで、その対象DOM要素を覆うようなモーダルを表示できます。
※この際、対象DOM要素のpositionを'relative'、MSBoxのpositionオプションを'absolute'とする必要があります。

targetの指定方法① 直接COM要素指定

let msbox = new MSBox({
    target: document.getElementById('target'),
    position: 'absolute',
});

上記の様に直接DOM要素を指定できます。

targetの指定方法② jQuery要素指定

let msbox = new MSBox({
    target: $('#target'),
    position: 'absolute',
});

上記の様にjQuery要素を指定できます。

targetの指定方法③ idを指定

let msbox = new MSBox({
    target: '#target',
    position: 'absolute',
});

上記の様にidセレクタを用いて指定できます。

Methods

以下のmethodが使用可能です。

Options

以下のoptionが設定可能です。