来看看怎么通过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>


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


相关文章
|
14天前
|
前端开发
通过onhashchange事件,点击a标签,文本框出现对应内容
通过onhashchange事件,点击a标签,文本框出现对应内容
|
JavaScript 前端开发
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
45 0
|
Web App开发 JavaScript 前端开发
对话框、模态框和弹出框看起来很相似,它们有何不同?
由于一个新的 popover 属性正在被提出,所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。
26383 1
|
前端开发 JavaScript
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
543 0
|
JavaScript 前端开发
js:获取鼠标点击位置,弹出提示框
js:获取鼠标点击位置,弹出提示框
332 0
js:获取鼠标点击位置,弹出提示框
|
JavaScript 前端开发
给项目设置打开窗口的标题和小图标
给项目设置打开窗口的标题和小图标 有时我们需要为我的web项目的设置 如下所示: image.png 这里我们设置如下: 文件的上传与下载 ...
909 0