jquery弹出层控件

本文介绍如何利用jQuery实现一个自定义的弹出层插件,包括插件的基本结构、核心函数和使用方法。通过实例演示了如何在网页中创建动态的弹出层,提供了一个方便快捷的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

(function($) {
    // 插件的定义
    // var opts;
    $.fn.modelwindow = function(options) {
        debug(this);
        // build main options before element iteration
        opts = $.extend({}, $.fn.modelwindow.defaults, options);

        $("#contentdiv").css({ display: "none" });
        // iterate and reformat each matched element     
        this.each(function() {

            //  var markup = $this.html();
            // call our format function

            $(this).click(function() {
                $("#contentdiv").html(showdiv($(this).attr("href")), opts);
                $("#contentdiv").fadeIn(700)
                return false;
            });

        });
    };
    // 私有函数:debugging     
    function debug($obj) {
        if (window.console && window.console.log)
            window.console.log('modelwindow selection count: ' + $obj.size());
    };
    // 定义暴露format函数     
    $.fn.modelwindow.format = function(txt) {
        return '<strong>' + txt + '</strong>';
    };
    // 定义弹出层函数
    showdiv = function(url, opts) {
        return '<div id="maskdiv" onclick="modelwindowhidden()"></div><div id="showdiv" ><div class="showdivbar"><a href="#" class="showdivbarclose" onclick="modelwindowhidden(opts)">close</a></div><iframe name="iframe" id="iframe" src=' + url + ' width="100%" height="500" /></div>';
    };
    //隐藏窗口
    modelwindowhidden = function(opts) {
         
        var d = $("#iframe").contents().find(opts.callbackcontentid).val();
        opts.callback;
        opts.onclosed(d);
       
        $('#contentdiv').fadeOut(700);
        $('#contentdiv').html("");

       
    }
    // 插件的defaults     
    $.fn.modelwindow.defaults = {
        foreground: 'red',
        background: 'yellow',
        callback: {},
        onclosed: {},
        callbackcontentid: ""

    };
    // 闭包结束     
})(jQuery);     
 
 
调用方法
$(document).ready(function() {
     $("a").modelwindow({
      onclosed: function(data) { $("#cb").val(data); },
      callbackcontentid: "#Text4"

    })
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值