对话框-plasm-simplemodal-1.1特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是对话框-plasm-simplemodal-1.1特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8" />
    <title>Simple Modal Dialog</title>
    <link rel="stylesheet" href="assets/css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="assets/css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="../Source/assets/css/simplemodal.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="assets/javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Source/simple-modal.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/javascript/demo.js" type="text/javascript" charset="utf-8"></script>
	  <link rel="shortcut icon" type="image/png" href="http://simplemodal.plasm.it/apple-touch-icon.png" />
</head>
<body>
	<div class="header">
    <div class="window"></div>
	  <div class="simple-modal-title"></div>
	</div>
	<div class="wrapper">
		<ul>
			<li class="example-item" id="alert">
				<img src="assets/images/example-1.jpg" width="196" height="147" alt="Example 1">
				<a href="javascript;">Alert</a>
			</li>
			<li class="example-item" id="confirm">
				<img src="assets/images/example-2.jpg" width="196" height="147" alt="Example 2">
				<a href="#">Confirm</a>
			</li>
			<li class="example-item" id="modal">
				<img src="assets/images/example-3.jpg" width="196" height="147" alt="Example 3">
				<a href="#">Modal</a>
			</li>
			<li class="example-item" id="modal-ajax">
				<img src="assets/images/example-4.jpg" width="196" height="147" alt="Example 4">
				<a href="#">Modal Ajax</a>
			</li>
			<li class="example-item" id="modal-image">
				<img src="assets/images/example-5.jpg" width="196" height="147" alt="Example 5">
				<a href="#">Modal Image</a>
			</li>
			<li class="example-item" id="alert-noheader">
				<img src="assets/images/example-6.jpg" width="196" height="147" alt="Example 6">
				<a href="#">No header</a>
			</li>
			<li class="example-item" id="modal-nofooter">
				<img src="assets/images/example-7.jpg" width="196" height="147" alt="Example 7">
				<a href="#">Video embed</a>
			</li>
			<li class="example-item" id="example-eheh">
				<img src="assets/images/example-8.jpg" width="196" height="147" alt="?">
				<a href="#">?</a>
			</li>
			
		</ul>
		<div class="clear"></div>
		<p class="credits">漏 2011 <a title="Plasm" href="http://www.plasm.it">Plasm</a>. All Rights Reserved.</p>
	</div>
	<div class="clear"></div>
</body>
</html>

JS代码(simple-modal.js):

/*---description:SIMPLE MODAL 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;
	i t can work in asynchronous mode and retrieve content from external pages or getting the inline content. SIMPLE MODAL is not a lightbox although the possibility to hide parts of its layout may partially make it similar.license:MIT-styleauthors:- Marco Dell'Annarequires:- core/1.3:'*'provides:- SimpleModal...* Mootools Simple Modal* Version 1.0* Copyright (c) 2011 Marco Dell'Anna - http://www.plasm.it** Requires:* MooTools http://mootools.net** Permission is hereby granted,free of charge,to any person* obtaining a copy of this software and associated documentation* files (the "Software"),to deal in the Software without* restriction,including without limitation the rights to use,* copy,modify,merge,publish,distribute,sublicense,and/or sell* copies of the Software,and to permit persons to whom the* Software is furnished to do so,subject to the following* conditions:** The above copyright notice and this permission notice shall be* included in all copies or substantial portions of the Software.** THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,* EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES* OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT* HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,* WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING* FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR* OTHER DEALINGS IN THE SOFTWARE.** Log:* 1.0 - Inizio implementazione release stabile [Tested on:ie7/ie8/ie9/Chrome/Firefox7/Safari]*/
var SimpleModal = new Class({
	// Implements Implements:[Options],request:null,buttons:[],// Options options:{
	onAppend:Function,// callback inject in DOM offsetTop:null,overlayOpacity:.3,overlayColor:"#000000",width:400,draggable:true,keyEsc:true,overlayClick:true,closeButton:true,// X close button hideHeader:false,hideFooter:false,btn_ok:"OK",// Label btn_cancel:"Cancel",// Label template:"<div class=\"simple-modal-header\"> \ <h1>{
	_TITLE_}
</h1> \ </div> \ <div class=\"simple-modal-body\"> \ <div class=\"contents\">{
	_CONTENTS_}
</div> \ </div> \ <div class=\"simple-modal-footer\"></div>"}
,/** * Initialization */
 initialize:function(options){
	//set options this.setOptions(options);
}
,/** * public method show * Open Modal * @options:param to rewrite * @return node HTML */
 show:function(options){
	if(!options) options ={
}
;
	// Inserisce Overlay this._overlay("show");
	// Switch different modal switch( options.model ){
	// Require title && contents && callback case "confirm":// Add button confirm this.addButton(this.options.btn_ok,"btn primary btn-margin",function(){
	try{
	options.callback()}
catch(err){
}
;
	this.hide();
}
) // Add button cancel this.addButton(this.options.btn_cancel,"btn secondary");
	// Renderingvar node = this._drawWindow(options);
	// Add Esc Behaviourthis._addEscBehaviour();
	break;
	// Require title && contents (define the action buttons externally) case "modal":// Renderingvar node = this._drawWindow(options);
	// Add Esc Behaviourthis._addEscBehaviour();
	break;
	// Require title && url contents (define the action buttons externally) case "modal-ajax":// Renderingvar node = this._drawWindow(options);
	this._loadContents({
	"url":options.param.url || "","onRequestComplete":options.param.onRequestComplete||Function}
) break;
	// Require title && contents default:// Alert // Add button this.addButton(this.options.btn_ok,"btn primary");
	// Renderingvar node = this._drawWindow(options);
	// Add Esc Behaviourthis._addEscBehaviour();
	break;
}
// Custom size Modal node.setStyles({
	width:this.options.width}
);
	// Hide Header &&/|| Footer if( this.options.hideHeader ) node.addClass("hide-header");
	if( this.options.hideFooter ) node.addClass("hide-footer");
	// Add Button X if( this.options.closeButton ) this._addCloseButton();
	// Enabled Drag Window if( this.options.draggable ){
	var headDrag = node.getElement(".simple-modal-header");
	new Drag(node,{
	handle:headDrag}
);
	// Set handle cursor headDrag.setStyle("cursor","move") node.addClass("draggable");
}
// Resize Stage this._display();
}
,/** * public method hide * Close model window * return */
 hide:function(){
	try{
	if( typeof(this.request) == "object" ) this.request.cancel();
}
catch(err){
}
this._overlay('hide');
	return;
}
,/** * private method _drawWindow * Rendering window * return node SM */
_drawWindow:function(options){
	// Add Node in DOM var node = new Element("div#simple-modal",{
	"class":"simple-modal"}
);
	node.inject( $$("body")[0] );
	// Set Contentsvar html = this._template(this.options.template,{
	"_TITLE_":options.title || "Untitled","_CONTENTS_":options.contents || ""}
);
	node.set("html",html);
	// Add all buttons this._injectAllButtons();
	// Callback append this.options.onAppend();
	return node;
}
,/** * public method addButton * Add button to Modal button array * require @label:string,@classe:string,@clickEvent:event * @return node HTML */
 addButton:function(label,classe,clickEvent){
	var bt = new Element('a',{
	"title":label,"text":label,"class":classe,"events":{
	click:(clickEvent || this.hide).bind(this)}
}
);
	this.buttons.push(bt);
	return bt;
}
,/** * private method _injectAllButtons * Inject all buttons in simple-modal-footer * @return */
 _injectAllButtons:function(){
	this.buttons.each( function(e,i){
	e.inject( $("simple-modal").getElement(".simple-modal-footer") );
}
);
	return;
}
,/** * private method _addCloseButton * Inject Close botton (X button) * @return node HTML */
 _addCloseButton:function(){
	var b = new Element("a",{
	"class":"close","href":"#","html":"x"}
);
	b.inject($("simple-modal"),"top");
	// Aggiunge bottome X Close b.addEvent("click",function(e){
	if(e) e.stop();
	this.hide();
}
.bind( this )) return b;
}
,/** * private method _overlay * Create/Destroy overlay and Modal * @return */
 _overlay:function(status){
	switch( status ){
	case 'show':this._overlay('hide');
	var overlay = new Element("div",{
	"id":"simple-modal-overlay"}
);
	overlay.inject( $$("body")[0] );
	overlay.setStyle("background-color",this.options.overlayColor);
	overlay.fade("hide").fade(this.options.overlayOpacity);
	// Behaviour if( this.options.overlayClick){
	overlay.addEvent("click",function(e){
	if(e) e.stop();
	this.hide();
}
.bind(this))}
// Add Control Resize this.__resize = this._display.bind(this);
	window.addEvent("resize",this.__resize );
	break;
	case 'hide':// Remove Event Resize window.removeEvent("resize",this._display);
	// Remove Event Resize if(this.options.keyEsc){
	var fixEV = Browser.name != 'ie' ? "keydown":"onkeydown";
	window.removeEvent(fixEV,this._removeSM);
}
// Remove Overlay try{
	$('simple-modal-overlay').destroy();
}
catch(err){
}
// Remove Modal try{
	$('simple-modal').destroy();
}
catch(err){
}
break;
}
return;
}
,/** * private method _loadContents * Async request for modal ajax * @return */
 _loadContents:function(param){
	// Set Loading$('simple-modal').addClass("loading");
	// Match image filevar re = new RegExp( /([^\/\\]+)\.(jpg|png|gif)$/i );
	if( param.url.match(re) ){
	// Hide Header/Footer $('simple-modal').addClass("hide-footer");
	// Remove All Event on Overlay$("simple-modal-overlay").removeEvents();
	// Prevent Abort// Immaginevar images = [param.url];
	new Asset.images(images,{
	onProgress:function(i){
	immagine = this;
}
,onComplete:function(){
	try{
	// Remove loading$('simple-modal').removeClass("loading");
	// Imposta dimensionivar content = $('simple-modal').getElement(".contents");
	var padding = content.getStyle("padding").split(" ");
	var width = (immagine.get("width").toInt()) + (padding[1].toInt()+padding[3].toInt())var height = immagine.get("height").toInt();
	// Widthvar myFx1 = new Fx.Tween($("simple-modal"),{
	duration:'normal',transition:'sine:out',link:'cancel',property:'width'}
).start($("simple-modal").getCoordinates().width,width);
	// Heightvar myFx2 = new Fx.Tween(content,{
	duration:'normal',transition:'sine:out',link:'cancel',property:'height'}
).start(content.getCoordinates().height,height).chain(function(){
	// Injectimmagine.inject( $('simple-modal').getElement(".contents").empty() ).fade("hide").fade("in");
	this._display();
	// Add Esc Behaviourthis._addEscBehaviour();
}
.bind(this));
	// Leftvar myFx3 = new Fx.Tween($("simple-modal"),{
	duration:'normal',transition:'sine:out',link:'cancel',property:'left'}
).start($("simple-modal").getCoordinates().left,(window.getCoordinates().width - width)/2);
}
catch(err){
}
}
.bind(this)}
);
}
else{
	// Request HTML this.request = new Request.HTML({
	evalScripts:false,url:param.url,method:'get',onRequest:function(){
}
,onSuccess:function(responseTree,responseElements,responseHTML,responseJavaScript){
	$('simple-modal').removeClass("loading");
	$('simple-modal').getElement(".contents").set("html",responseHTML);
	param.onRequestComplete();
	// Execute script page loaded eval(responseJavaScript) // Resize this._display();
	// Add Esc Behaviourthis._addEscBehaviour();
}
.bind(this),onFailure:function(){
	$('simple-modal').removeClass("loading");
	$('simple-modal').getElement(".contents").set("html","loading failed")}
}
).send();
}
}
,/** * private method _display * Move interface * @return */
 _display:function(){
	// Update overlay try{
	$("simple-modal-overlay").setStyles({
	height:window.getCoordinates().height //$$("body")[0].getScrollSize().y}
);
}
catch(err){
}
// Update position popup try{
	var offsetTop = this.options.offsetTop || 40;
	//this.options.offsetTop != null ? this.options.offsetTop:window.getScroll().y + 40;
	$("simple-modal").setStyles({
	top:offsetTop,left:((window.getCoordinates().width - $("simple-modal").getCoordinates().width)/2 )}
);
}
catch(err){
}
return;
}
,/** * private method _addEscBehaviour * add Event ESC * @return */
 _addEscBehaviour:function(){
	if(this.options.keyEsc){
	this._removeSM = function(e){
	if( e.key == "esc" ) this.hide();
}
.bind(this) // Remove Event Resize if(this.options.keyEsc){
	var fixEV = Browser.name != 'ie' ? "keydown":"onkeydown";
	window.addEvent(fixEV,this._removeSM );
}
}
}
,/** * private method _template * simple template by Thomas Fuchs * @return */
 _template:function(s,d){
	for(var p in d) s=s.replace(new RegExp('{
	'+p+'}
','g'),d[p]);
	return s;
}
}
);

附件:下载该文件资源,减少时间成本(增值服务)