用JQuery 实现的自定义对话框_jquery

php中文网

发布时间：2016-05-16 19:16:15

1477人浏览过

来源于php中文网

原创

javascript为我们提供几种对话框功能，但功能都十分有限；虽然在ie下可以通过模式窗体的方式创建更丰富的对话框功能，但毕竟只有ie得到支持。为了得到更丰富的自定义对话框功能，于是用jquery编写了一个对话框插件；只需简单地引用相关javascript就能得到丰富的自定义对话框功能。
插件功能特点:
       允许通过css进行外观控制。
       可以任意把面页的元素作为对话框显示。
       当对话框激活时，对话框外的任何元素不能接受鼠标操作。
       对话框可以在工作区范围内任意移动，根据工作区大小自适应居中功能。
       并不需要编写复杂的javascript,通过简单html属性描述即可。
       经过测试插件可以在firefox和ie下正常工作。
简单使用描述：
       引用jquery和对话框插件文件：
       <script></script>
<script></script>
       定义相关按钮为行：

       定义相关对话框显示的内容:

成新网络商城购物系统

使用模板与程序分离的方式构建，依靠专门设计的数据库操作类实现数据库存取，具有专有错误处理模块，通过 Email 实时报告数据库错误，除具有满足购物需要的全部功能外，成新商城购物系统还对购物系统体系做了丰富的扩展，全新设计的搜索功能，自定义成新商城购物系统代码功能代码已经全面优化，杜绝SQL注入漏洞前台测试用户名：admin密码：admin888后台管理员名：admin密码：admin888

下载

jquery模式对话框插件好用吗?

下载例程和源码

复制代码代码如下:

/* JQuery 模式对话框插件
* writer: FanJianHan (henryfan@msn.com)
* License: GPL (GPL-LICENSE.txt) licenses.
*/
//是否已初始化过对话框
var MessageOninit = false;
//记录body滚动条的x,y偏移量;显示内容的元素对象，显示内容元素对象的父对象
var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;
//对话框对象，对话框宽度，对话框高度
var MessageBox_win,MessageBox_width,MessageBox_height;
//对话框是否处于移动状态
var MessageBox_Moving = false;
//显示模式提示框
function ShowMessageBox(option)
{
    var container,iframe,enabled,enabledframe;
    var height=400;
    var width =400;
    MessageBox_scrolltop =0;
    MessageBox_scrollleft =0;
    if(!MessageOninit)
    {
       CreateContainer(option);
       MessageOninit = true;
       $('#messagebox_close').click(function(){
             CloseMessageBox();
       });
       $(window).resize(function(){
            SetStyle(option);
            SetEnabledStyle();
       });
       $(window).scroll(function(e){
            MessageBox_scrolltop =document.documentElement.scrollTop;
            MessageBox_scrollleft = document.documentElement.scrollLeft;
            SetEnabledStyle();
       });
       MessageBox_win = $("#messagebox_win");
       $('#messagebox_title').mousedown(handleMouseDown);
       $('#messagebox_title').mouseup(handleMouseUp);
       $('#messagebox_title').mousemove(handleMouseMove);
       document.onmouseup = handleMouseUp;

    }

    if(option.height)
        height = parseInt(option.height);
    if(option.width)
        width = parseInt(option.width);
    MessageBox_height = height;
    MessageBox_width = width;
    Messagebox_AC = $('#'+option.control);
    MessageBox_PC = Messagebox_AC.parent();
    Messagebox_AC.css('display','');
    enabled='

'
    enabledframe='';
    $('#messagebox_enabledframe').remove()_
    $('#messagebox_enabled').remove();
    $('#messagebox_title').html(option.title);
    $('#messagebox_from').append(Messagebox_AC);
    SetStyle(option);
    $(document.body).append(enabledframe);
    $(document.body).append(enabled);
    SetEnabledStyle();
    $('#messagebox_win').fadeIn("slow");

    //创建对话框容器
    function CreateContainer(option)
    {
        var html;
        html='

';
        if(option.parent)
        {
            $('#' + option.parent).append(html);
        }
        else
        {
            $(document.body).append(html);
        }
    }
    //设置显示时背景式样
    function SetEnabledStyle()
    {
        var de,w,h,css,region;
        region = GetDocumentRegion();
        css ={width:region.width+"px",height:region.height+"px",
        left: MessageBox_scrollleft+'px',top: MessageBox_scrolltop +'px'}
        GetOpacity(css);
        $("#messagebox_enabled").css(css);
        $("#messagebox_enabledframe").css(css);
    }
    //设置透明式样
    function GetOpacity(css)
    {
        if(window.navigator.userAgent.indexOf('MSIE')>=1)
        {
            css.filter= 'progid:DXImageTransform.Microsoft.Alpha(opacity=30)';
        }
        else
        {
            css.opacity= '0.3';
        }
    }
    //设置对话框试样
    function SetStyle(option)
    {
        var region,css;
        region = GetDocumentRegion();
        css ={width:MessageBox_width+'px',height:MessageBox_height+'px',
        left: ((region.width - MessageBox_width)/2)+'px',top: ((region.height - MessageBox_height)/2)+'px'}
        if(region.height         {
            css.top=10+'px';
        }
        else
        {
            css.top=((region.height - MessageBox_height)/2)+'px'
        }
        $('#messagebox_win').css(css);
        css.top='0px';
        css.left='0px';
        $('#messagebox_table').css(css);
        css.width='100%';
        css.height='16px';
        $('#messagebox_title_td').css(css);
        css.height= height-46 +'px';
        $('#messagebox_body_td').css(css);

    }
    var down_x,down_y,cx,cy;
    function handleMouseDown(e)
    {
            var evt = e || event;
         down_x=evt.clientX;
         down_y = evt.clientY;
         cx =(parseInt(MessageBox_win.css('left'))|0);
         cy = (parseInt(MessageBox_win.css('top'))|0)
         MessageBox_Moving= true;3
         document.documentElement.onselectstart = function(){return false};
         document.documentElement.ondrag = function(){return false};
         document.onmousemove = handleMouseMove;
         $(document.body).append('

');
         $('#messagebox_move').css('width',MessageBox_win.css('width'));
         $('#messagebox_move').css('height',MessageBox_win_u99 ?ss('height'));
         $('#messagebox_move').css('left',MessageBox_win.css('left'));
         $('#messagebox_move').css('top',MessageBox_win.css('top'));

    }
    function GetDocumentRegion()
    {
        var w,h,de;
        de = document.documentElement;
        w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
        h = self.innerHeight || (de&&de.clientHeight)|| document.body.clientHeight;
        return {height:h,width:w};
    }
    function handleMouseMove(e)
    {
        var left,top,region;
        if (MessageBox_Moving)
        {
            var evt = e || event;
            left =evt.clientX+cx-down_x;
            top = evt.clientY+cy-down_y;
            region = GetDocumentRegion();
            if(left+ MessageBox_width > region.width)
            {
                left = region.width - 10- MessageBox_width;
            }
            if(top + MessageBox_height >region.height)3
            {
                top = region.height-10 - MessageBox_height;
            }
            if(left                 left =10;
            if(top                 top =10;
            var css ={left:left+'px',top:top+'px'}
            $('#messagebox_move').css(css);
        }
    }
    function handleMouseUp()
    {
        if(MessageBox_Moving)
        {
            MessageBox_win.css('width',$('#messagebox_move').css("width"));
            MessageBox_win.css('height',$('#messagebox_move').css("height"));
            MessageBox_win.css('left',$('#messagebox_move').css("left"));
            MessageBox_win.css('top',$('#messagebox_move').css("top"));
        }
        MessageBox_Moving _u61 ? false;
        document.onmousemove = null;
       $('#messagebox_move').remove();
    }

}
//关闭模式对话框
function CloseMessageBox()
{
    if(MessageOninit)
    {
       $('#messagebox_win').hide();
       $('#messagebox_enabled').remove();
       $('#messagebox_enabledframe').remove();
      Messagebox_AC.css('display','none');
       MessageBox_PC.append(Messagebox_AC);
    }
     document.documentElement.onselectstart = null;
         document.documentElement.ondrag = null;
}
$(document).ready(function(){
    $(document).find('[@showoption]').each(function(){
        var namevalue;
        //虽然显示的元素id,显示宽度,显示高度,标题,对话框寄居的元素对象id
        var option={control:'',width:'400',height:'400',title:'',parent:null};
        var properties = $(this).attr('showoption').split(';');
        for(i=0;i        {
            namevalue = properties[i].split(':');
            if(namevalue.length >1)
            {
                execute ="option." + namevalue[0] +'=\''+ namevalue[1]+'\';';
                eval(execute);
            }
        }
        $(this).click(function(){
            ShowMessageBox(option);
            document.body.focus();
        });
    });
});

如何在 Web Component 中正确访问全局 CSS 自定义属性

如何将基于回调的函数封装为 Promise 并正确返回结果

Next.js 13 是否支持纯客户端渲染？真相与替代方案

检测用户通过浏览器前进/后退按钮返回页面时执行 JavaScript 函数

如何用 JavaScript 实现鼠标移出时自动收起悬浮层（滑动隐藏）

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：this[] 指的是什么内容讨论_javascript技巧下一篇：javascript对象的property和prototype是这样一种关系_javascript技巧

热门AI工具