Javascript

【Javascript】モーダルを作成するための軽量のjavascriptプラグインPopbox

July 29, 2018
Popbox.js

Popbox.jsはスタック可能なモーダルを作成するための軽量のjavascriptプラグインです。カスタマイズ可能で、依存関係はありません。

Installation

<script type="text/javascript">
  var popbox = new Popbox({
        blur:true,
        overlay:true,
      });
</script>

Example HTML

 <div data-popbox-id="mypopbox1" class="popbox">
   <div class="popbox_container">
    Popbox content 1
    <button data-popbox-close="mypopbox1">Close</button>
   </div>
 </div>

 <div data-popbox-id="mypopbox2" class="popbox">
   <div class="popbox_container">
    Popbox content 2
   </div>
    <button data-popbox-close="mypopbox2">Close</button>
 </div>

 <div class="popbox_main_content">
    Main content of the page

    <button data-popbox-target="mypopbox1">
    Open mypopbox 1
    </button>

    <button data-popbox-target="mypopbox2">
    Open mypopbox 2
    </button>
&nbsp </div>

Options

  1. blur

API

<script type="text/javascript">
  var popbox =   new Popbox({
        blur:true,
        overlay:true,
      });

  //open a popbox
  popbox.open('mypopbox1');	
  //close a popboxs
  popbox.close('mypopbox1');	
  //close all popboxs
  popbox.clear(); 
</script>