Jmodal提示框的改造

Jquery插件---JModal提示框的改造，可以实现预览文章的效果，当然JModal本身也是可以利用ajax直接调用页面来显示的。

在典型的cms系统中，发布文章时，都是已经编辑好样式的HTML加上文本信息，所以我们可以通过读取这些信息编辑好样式的文本信息到JModal插件中，就可以实现预览功能。

如下图：

步骤如下：

1. 在页面中首先引入jmodal的js，jquery核心js（注意版本，参考jmodal依赖的jquery版本号），以及jmodal的css样式

   <script language="javascript" src="<venus:base/>/js/jquery/jquery-1.3.min.js"></script>

   <script src="<venus:base/>/js/jquery/plugin/jquery.jmodal.js"></script>

   <link rel="Stylesheet" type="text/css" href="<venus:base/>/css/jquery/jquery.jmodal.css" />

2. 在工程中引入jmodal需要的图片资源，如下图，5个图片分别组成了提示框四边的黑框和四个角

3. 修改jquery.jmodal.css文件中的图片引入的路径

    如： 

       .jmodal-main td.jmodal-top-right

       {

    width:10px;

    background:url(../../images/jmodal/dialog_top_right.png) center bottom no-repeat;

       }

4. 重点改造jquery.jmodal.js文件

     分析其中的代码：

/// <reference path="jquery.js"/> /* * jmodal * version: 2.0 (05/13/2009) * @ jQuery v1.3.* * * Licensed under the GPL: * http://gplv3.fsf.org * * Copyright 2008, 2009 Jericho [ thisnamemeansnothing[at]gmail.com ] * */ $.extend($.fn, { hideJmodal: function() { $('#jmodal-overlay').animate({ opacity: 0 }, function() { $(this).css('display', 'none') }); $('#jquery-jmodal').animate({ opacity: 0 }, function() { $(this).css('display', 'none') }); }, jmodal: function(setting) { var ps = $.fn.extend({ //定义了一个ps对象，接受从页面传入的参数 data: {}, marginTop: 100, buttonText: {ok: 'Ok'}, okEvent: function(e) { }, initWidth: 400, fixed: false, title: 'JModal Dialog', content: 'This is a jquery plugin!' }, setting); ps.docWidth = $(document).width(); ps.docHeight = $(document).height(); if ($('#jquery-jmodal').length == 0) { $('<div id="jmodal-overlay" class="jmodal-overlay">' + '<iframe style="position:absolute;top:0px;left:0px;width:100%;z-index:-1;filter=' + "'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'" + ';"></iframe>' + //这行代码用于屏蔽css遮罩不能遮住页面的select元素的问题 '</div>' + //提示框由一个外层的div，加上里面的一个table，table里面再加上三个tr组成，显示的内容就在中间的tr中 '<div class="jmodal-main" id="jquery-jmodal" >' + '<table cellpadding="0" cellspacing="0" >' + '<tr>' + '<td class="jmodal-top-left jmodal-png-fiexed"> </td>' + '<td class="jmodal-border-top jmodal-png-fiexed"> </td>' + '<td class="jmodal-top-right jmodal-png-fiexed"> </td>' + '</tr>' + '<tr>' + '<td class="jmodal-border-left jmodal-png-fiexed"> </td>' + '<td >' + '<div class="jmodal-title" />' + '<div class="jmodal-content" id="jmodal-container-content" style="height: 450px;overflow: auto;" />' + '<div class="jmodal-bottom">' + '<input type="button" value="' + ps.buttonText.ok + '" />' + '</div>' + '</td>' + '<td class="jmodal-border-right jmodal-png-fiexed"> </td>' + '</tr>' + '<tr>' + '<td class="jmodal-bottom-left jmodal-png-fiexed"> </td>' + '<td class="jmodal-border-bottom jmodal-png-fiexed"> </td>' + '<td class="jmodal-bottom-right jmodal-png-fiexed"> </td>' + '</tr>' + '</table>' + '</div>').appendTo($(document.body)); //$(document.body).find('form:first-child') || $(document.body) } else { $('#jmodal-overlay').css({ opacity: 0, 'display': 'block' }); $('#jquery-jmodal').css({ opacity: 0, 'display': 'block' }); } $('#jmodal-overlay').css({ //控制背景样式，即页面的黑色背景效果 height: ps.docHeight, width: ps.docWidth, opacity: 0 }).animate({ opacity: 0.5 }); //这行代码控制背景的透明度 $('#jquery-jmodal').css({ //控制提示框的样式 position: (ps.fixed ? 'fixed' : 'absolute'), width: ps.initWidth, left: (ps.docWidth - ps.initWidth) / 2, top: (ps.marginTop + document.documentElement.scrollTop - 50) }).animate({ opacity: 1 }); //提示框的透明度 $('#jquery-jmodal') .find('.jmodal-title') .html('<span style="float:left;" mce_style="float:left;">' + ps.title + '</span>' + '<span style="float:right;margin-right:5px;" mce_style="float:right;margin-right:5px;"> <a href="javascript:void(0)" mce_href="javascript:void(0)" id="jmodal-title-close" title="关闭"> X </a> </span>') .next() .next() .children('input:first-child') .attr('value', ps.buttonText.ok) .unbind('click') .one('click', function(e) { var args = { complete: $.fn.hideJmodal }; ps.okEvent(ps.data, args); }); if (typeof ps.content == 'string') { $('#jmodal-container-content').html(ps.content); //ps.content 即 页面传入的要显示的内容 } if (typeof ps.content == 'function') { var e = $('#jmodal-container-content'); e.holder = $('#jquery-jmodal'); ps.content(e); } //增加右上角 [X] 按钮事件 ，自定义的关闭事件 $('#jmodal-title-close').mouseup($.fn.hideJmodal); } })  

5. 调用jmodal插件

    在页面中，使用如下方式进行调用 

//预览窗口 function previewWindow(msg){ //alert($(document).width()); var pageWidth = $(document).width(); var initWidthValue = 2*(pageWidth/3); $.fn.jmodal({ title: '标题', //标题 content: msg, //显示的内容 buttonText: {ok:'确定'}, //【 确定】 按钮事件 initWidth:initWidthValue, //窗口宽度的初始值 okEvent: function(obj, args) { //自定义确定按钮事件 args.complete(); } }); }