实现js调用弹窗

最新推荐文章于 2025-06-19 19:48:29 发布

原创最新推荐文章于 2025-06-19 19:48:29 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

js应用同时被 2 个专栏收录

20 篇文章

订阅专栏

Html

6 篇文章

订阅专栏

本文详细介绍了如何在JavaScript中创建和使用自定义弹窗，包括弹窗的样式设置、内容动态加载、关闭按钮功能实现等关键步骤，帮助开发者更好地理解和掌握在网页应用中实现交互式的弹窗操作。

<span style="font-size:14px;">//Html代码：点击控件实现调用“收件人弹窗”
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <script src="<? echo base_url('static/js/<strong>user.js</strong>') ?>"></script>
    </head>
    <body>
        <div class="iframe-container">
           <table cellpadding="5">
                <tr><td width="150">收件人：</td>
                    <td><div style="width:800px;" class="user-group" data="" data-form="form[uids][]" data-multi="true" ></div></td>                      
                </tr>
            </table>
        </div>
    </body>
</html></span>

【对应的user.js】

$(function(){
    /* 弹出层选用户 */
    $('.user-group').on('click','.user-add',function (){
        div = $(this).parent('div.user-group');
        box = $(this).next('div.user-gather');
        single = (typeof(div.attr('data-multi'))=='undefined');
        window.top.art.dialog.open('base/user/index/dialog?single='+ (single),{//此处调用对应的dialog页面样式
            title:'选择' + (single?'一':'多') +'位同事',
            width:480,
            height:440,  
            lock:true,          
            ok: function () {
                users = this.iframe.contentWindow.$(".active");
                users.each(function(i,dom){
                    id = $(dom).attr('data-uid');
                    if (div.find('div[data-uid='+id+']').length){
                        window.top.art.dialog.tips('请不要重复添加');
                        return;
                    } 
                    input = '<input type="hidden" name="'+ div.attr('data-form') +'" value="'+id+'">';
                    $(dom).append(input);
                    if (single){
                        box.html(dom.outerHTML);
                    }else{
                        box.append(dom.outerHTML);
                    }
                    window.top.art.dialog.tips('已添加');
                });                
                if (!single) return false;
            },
            cancel: true
        });
    });
    /* 用户删除 */
    $('.user-group').on('click','.user-event',function (){
        if (confirm('您确定删除这个用户吗')){
            $(this).remove();
        }
    });
    /* 用户还原 */
    $('.user-group').each(function (i){    		
        var _this = this;
        var _data =$(_this).attr('data');
        var _edit = $(_this).attr('data-form');
        if(_edit) $(_this).append('<div class="user-add user-item"><p><i class="glyphicon glyphicon-user"></i></p>点击选择</div>');
        $(_this).append('<div class="user-gather"></div>');
        if (_data && _data!=0){
            $.each(_data.split(','), function(i,id){
                if (!id) return;
                $.getJSON(window.top.site_url + 'base/user/query?id='+id,function (json){
                    if (!json) return;
                    var _html = '<div class="user-item '+(_edit?'user-event':'')+'" data-uid="'+id+'" data-name="'+json.realname+'">';
                    if(_edit) _html +='<input type="hidden" name="'+ $(_this).attr('data-form') +'" value="'+id+'">';
                    _html += '<p><img src="'+(json.photo||window.top.base_url+'statics/image/unfound.jpg' )+'"></p>'+json.realname;
                    _html +='</div>';
                    $(_this).find('.user-gather').append(_html);
                });
            });
        }
    	  
    });
});

【对应的dialog页面】

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <style>
            body{width:480px;overflow:hidden;}
        </style>
        <script>
            $(function(){
                $('.user-item').on('click',function (){
                <? if ($this->input->get('single') == 'true'): ?>
                $(this).siblings().removeClass('active');
                <? endif; ?>
            $(this).toggleClass('active');
        }) ;
    });
        </script>
    </head>
    <body>
        <div class="iframe-container">
            <form action="?" method="get" class="filter">
                <? echo form_hidden('single',$this->input->get('single'))?>
                按姓名：<? echo form_input('name', $this->input->get('name')) ?> 
				按角色：<? echo form_dropdown('role_id', $roles, $this->input->get('role_id')); ?>
                <input type="submit" value=" <? echo lang('search') ?> " />
            </form>
            <div class="user-group">
                <? foreach ($users as $user): ?>
                    <div class="user-item user-event" data-uid="<? echo $user->id ?>" data-name="<? echo $user->name ?>"><i class="glyphicon glyphicon-check hide"></i><p><img src="<? echo $user->photo ? $user->photo : config_item('unfound_photo') ?>"></p><? echo $user->name ?></div>
                <? endforeach; ?>
            </div>
                <a class="pointer" onclick="$('.user-item').addClass('active')">全选</a> <a class="pointer" onclick="$('.user-item').removeClass('active')">反选</a>
                <div class="page pull-right"><? echo $page; ?></div>
        </div>
    </body>
</html>

【效果预览】