article:
JS Plugin: Fine Uploader - Version 2.1
article:
JS Plugin: Grid-A-Licious version 3.01

JS Plugin: Simple Modal - another window modal

Advertisement

Plugin: Simple Modal"SimpleModal is a small plugin to create modal windows."

"It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content."

"SimpleModal is not a lightbox although the possibility to hide parts of its layout may partially make it similar."


Implementation

<head>

<link rel="stylesheet" href="simplemodal.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="simple-modal.js" type="text/javascript" charset="utf-8"></script>

<body>

- Example: Alert

Plugin: Simple Modal - another window modal


#html code
<div class="example-item" id="myElement"><a href="javascript;">Alert</a></div>

#js code
$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"btn_ok":"Alert button"});
      SM.show({
        "title":"Title",
        "contents":"Your message..."
      });
});


- Example: Modal Ajax

Plugin: Simple Modal - another window modal


#html code
<div class="example-item" id="myElement"><a href="javascript;">Modal Ajax</a></div>

#js code
$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"width":600});
      SM.addButton("Action button", "btn primary", function(){
          this.hide();
      });
      SM.addButton("Cancel", "btn");
      SM.show({
        "model":"modal-ajax",
        "title":"Title",
        "param":{
          "url":"file-content.php",
          "onRequestComplete": function(){ /* Action on request complete */ }
        }
      });
});

</body>

more sample in attach / demo / download ...



source
github
demo
download

Advertisement
Tags: plugin, mootools, modal, window, alert, image, lightbox, develop, css3, html5, js, javascript

Leave a Comment

No Comment

© Creative3x Ltd.