popupmodal.js Examples


Alert Confirm Prompt
Code example :
// Alert popup.alert( { content : .... } );
// Confirm popup.confirm( { content : .... } );
// Prompt popup.prompt( { content : .... } );

<Usage>

Include the following in your project.
// CSS <link rel="stylesheet" href="your-path/popupmodal.css" />
// JS <script src="your-path/popupmodal-min.js">></script>
and attach your desire element with a click event listener.
document.getElementById('your-element').addEventListener('click', function()){
  popup.alert(......);
}
...and you're done!

<Options>

Options : Type Default Description
content : string null The content to be shown in the popup modal. DOM element is acceptable too. Popup modal will not be shown if there is no content.
keyboard : boolean true To enable 'enter' and 'esc' key on 'Ok' and 'Cancel' button respectively.
input_length : number 99 Configure the maximum number of character allowed.
placeholder : string "" A placeholder for text box.
default_btns : object null Configure the popup modal default button's text.
Note : Default buttons for alert is 'ok'. For confirm and prompt is 'ok' and 'cancel'.
custom_btns : object null Add extra buttons to the popup modal.
Note : Do checkout the next section on how to implement the button's callback function.
btn_align : string 'left' Popup modal's button alignment, either 'left' or 'right'.
modal_size : string / number 'small' The popup modal size. There are 'small', 'medium' and 'large'. Numbers are allowed as well, but without the 'px'. eg : 200.
bg_overlay_color : string '#000' The overlay background color of the popup modal.
effect : string 'top' The effect when the popup modal is shown. Slide from 'top', 'bottom', 'left' or 'right'. 'none' for no effect.
Here's how to use them.
popup.alert({
  content: 'Hello from the other side...',
  keyboard : false,
  btn_align : 'right',
  effect : 'none',
  default_btns : {
    ok : 'the name you wanted to change'
  }
});
Demo

<Managing callbacks>

The callback function will receive only 1 parameter.
param. Description
e The event object. Usually is used to control the extra buttons.
proceed The status after clicking either one of the default buttons. True for 'Ok' and false for any buttons except 'Ok'.
input_value Get the value for input value for prompt popup modal.
Here's how to use the callback function. Note : There is no way of pausing javascript from executing. Thus, the only way is to create an event / callback to happen later.
popup.confirm(
  { content : 'Do you like me?', ...... },
  function(param){
    if(param.e.target.id == 'btn_extra_1_1'){
      popup.alert( { content : 'Is ok, take your time :)' } );
    } else if(param.proceed){
      popup.alert( { content : 'Yay!' } );
    } else if(!param.proceed){
      popup.alert( { content : 'So sad...' } );
    }
  }
);
Demo