SWM (SenangWebs Modals) Modal JavaScript Library Examples

Download This Plugin Back To CSSScript.Com

Build dynamic, customizable web modals with SWM. This JavaScript library offers flexible positioning, custom styling, and smooth animations.

HTML Attribute-based Modals

This is a centered modal with default background color and 50% opacity.

<div data-swm id="centerModal">
    <button data-swm-btn 
            data-swm-title="Center Modal" 
            data-swm-position="center"
            data-swm-bg-color="#000000"
            data-swm-bg-opacity="0.5">
        Center Modal
    </button>
    <div data-swm-body>
        <p>This is a centered modal with default background color and 50% opacity.</p>
    </div>
</div>
SWM.openModal('#centerModal');

Custom Styled Modal

This modal demonstrates multiple custom styling options:

  • Custom position (top right)
  • Custom background color (#8e44ad)
  • Custom opacity (0.8)
  • Custom blur effect (3px)
  • Custom z-index (9999)
  • Custom footer
<div data-swm id="customStyledModal">
    <button data-swm-btn 
            data-swm-title="Custom Styled Modal" 
            data-swm-position="top right"
            data-swm-bg-color="#8e44ad" 
            data-swm-bg-opacity="0.8" 
            data-swm-bg-blur="3" 
            data-swm-z-index="9999"
            data-swm-footer="Custom Footer">
        Custom Styled Modal
    </button>
    <div data-swm-body>
        <!-- Modal content -->
    </div>
</div>

Programmatically Created Modals

document.getElementById('createProgrammaticModal').addEventListener('click', function() {
    SWM.createModal({
        title: 'Programmatically Created Modal',
        content: '<p>This modal was created using JavaScript!</p>',
        footer: 'Custom Footer',
        position: 'center',
        bgColor: '#3498db',
        bgOpacity: '0.8',
        bgBlur: '5',
        zIndex: '9999'
    });
});