来看看怎么通过a标签打开一个对话框-阿里云开发者社区

开发者社区> 沉默王二> 正文

来看看怎么通过a标签打开一个对话框

简介: 来看看怎么通过a标签打开一个对话框
+关注继续查看

前言:也许这是一个很简单的动作,你似乎觉得这没什么,的确,在我完成了这个功能后,我觉得也很简单。




弹出框后面是一个table,点击单元格中的修改连接,就可以弹出对话框,并且能够将数据传递到页面前端。


页面


<a href="${ctx}/project/editProjectReback/${deal_item.id}" target="dialog" width="600">修改</a>


注意:


参数target

width


js封装

//dialogs
    $("a[target=dialog]", $p).each(function(){
        $(this).click(function(event){
            var $this = $(this);
            var title = $this.attr("title") || $this.text();
            var options = {};
            var w = $this.attr("width");
            var h = $this.attr("height");
            if (w) options.width = w;
            if (h) options.height = h;
            options.title = title;
            options.contentType = "ajax";
            options.showButton = eval($this.attr("showButton") || "false");
            options.showCancel = eval($this.attr("showCancel") || "false");
            options.showOk = eval($this.attr("showOk") || "false");
            options.type = "wee";
            options.onopen = eval($this.attr("onopen") ||  function() {});
            options.boxid = "pop_ajax_dialog";

            var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
            YUNM.debug(url);
            if (!url.isFinishedTm()) {
                $.showErr($this.attr("warn") || YUNM.msg("alertSelectMsg"));
                return false;
            }
            $.weeboxs.open(url, options);
            return false;
        });

注意:


此处仍然借用了DWZ的代码,通过将a标签上的参数传递给weebox弹出框。

url,用来使weebox内部通过ajax请求发送到服务端。

页面初始化时


让以上代码执行以下就好


weebox内部


else if (self.options.contentType == "ajax") {
    self.ajaxurl = self._content;
    self.setContent('<div class="dialog-loading"></div>');
    self.show();
    $.ajax({
        type : "post",
        url : self.ajaxurl,
        success : function(data) {
      self._content = data;
      self.setContent(self._content);
      self.onopen();
      self.focus();
      if (self.options.position == 'center') {
        self.setCenterPosition();
      }
        },
        error : YUNM.ajaxError
    })
    }


注意:这里使用ajax请求获取到服务端数据


jfinal


@Before(DealsInterceptor.class)
    public void editProjectReback() {
  if (dealItem != null) {
    setAttr("deal_item", dealItem);
    
    render("add_reback.jsp");
  }
    }


render到对应的页面,并且将参数“deal_item”传递到页面上。


add_reback.jsp


<textarea class="form-control required" rows="3" placeholder="报内容" name="description">${deal_item.description}</textarea>


结语:这串处理对我的整个项目有了很大的启示,接下来,我也将要对我原来的项目做法进行一些修改。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8469 0
来看看怎么通过a标签打开一个对话框
来看看怎么通过a标签打开一个对话框
8 0
javascript <a> 标签打开相对路径,绝对路径
标签中的href中,如果你写一个路径默认是以相对路径打开的,加上"http://" 消息头那就可以打开绝对路径 html: ' + cellvalue + '' js: openUrl: function(url) { if (url.
732 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2769 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10271 0
chrome新建标签 打开主页 谷歌浏览器新建标签页自动打开主页
今天逮到一个好的chrome应用,标签页重定向,每次新建标签页我是不打算再忍受那种谷歌的缓存了,http://url.cn/7E78nR 去这里添加进谷歌浏览器吧。。自动跳到你想打开的首页!
874 0
【火狐】火狐鼠标拖拽打开新标签扩展 QuickDrag 2.1.2.20
能看到这个标题然后进来的,你懂的!     xpi下载地址:http://down.tech.sina.com.cn/content/50652.html   说明:   支持 鼠标拖拽打开网址,相当犀利!
671 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11387 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
3646 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载