popupS

A simple way to display beautiful popupS.
×

Alert


×
Hello World!
   popupS.alert({
        content: 'Hello World!'
    });

Confirm


×
Continue?
   popupS.confirm({
        content: 'Continue?',
        onSubmit: function() {
                popupS.alert({
                        content: 'Great!'
                });
        }
    });

Prompt


×
What is your name?
   popupS.prompt({
        content: 'What is your name?',
        onSubmit: function(val) {
                popupS.alert({
                        content: 'Hi, ' + val + '!'
                });
        }
    });

Modal


×
   popupS.modal({
            content: '<div class="dropper-form aligned">
                    <div class="dropper-form-group">
                            <label for="f2-email">Email</label>
                            <input type="email" name="" id="f2-email">
                    </div>
                    <div class="dropper-form-group">
                            <label for="f2-password">Password</label>
                            <input type="password" name="" id="f2-password">
                    </div>
                    <div class="dropper-form-controls">
                            <label>
                                    <input type="checkbox" name="">
                                            <span class="dropper-checkbox checkbox-sub-blue"></span>
                                            Remember Me
                                    </label>
                            <button type="submit" class="dropper-button primary button-purple">Submit</button>
                    </div>
            </div>'
    });

React implementation


   popupS.modal({
        onOpen: function() {
                React.render(
                        searchExample,
                        this.$contentEl
                );
        },
        onClose: function() {
                this.$layerEl.style.opacity = "0";
                React.unmountComponentAtNode(this.$contentEl);
        }
    });
Fork me on GitHub