Modal
<style>body { height: 20em; }</style>
<button onclick="openModal('modal')">Open modal</button>
<div class="modal" id="modal">
<button class="close" onclick="closeModal()"><span class="close-sb-icon"></span></button>
<h2>Modal</h2>
<p>Content...</p>
<hr />
<button href="#" class="danger" onclick="closeModal()">Cancel</button>
<button class="success">Accept</button>
</div>
Open
<style>body { height: 20em; }</style>
<div class="open modal" id="modal">
<button class="close"><span class="close-sb-icon"></span></button>
<h2>Modal</h2>
<p>Content...</p>
<hr />
<button href="#" class="danger">Cancel</button>
<button class="success">Accept</button>
</div>
Big modal
<style>body { height: 10em; }</style>
<div class="open modal part-1" id="modal">
<button class="close"><span class="close-sb-icon"></span></button>
<h2>Modal</h2>
<ol class="group">
<li>Item abc def ghi jkl mno pqrs tuv wxyz</li>
<li>Item abc def wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ</li>
<li>Item abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ</li>
<li>Item abc def ghi jkl mno pqrs tuv w ABC DEF GHI JKL MNO PQRS TUV WXYZ</li>
<li>Item abc dejkl mno pqrs tuv wxyz ABC DEF GHI JKLO PQRS TUV WXYZ</li>
</ol>
<hr />
<button href="#" class="danger">Cancel</button>
<button class="success">Accept</button>
</div>