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

小鱼儿 2021-05-10 11:18 421阅读 0赞

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

![这里写图片描述][20150926162617758]

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

## 页面 ##

注意：

1.  参数target
2.  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;
    		});

注意：

1.  此处仍然借用了DWZ的代码，通过将a标签上的参数传递给weebox弹出框。
2.  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>

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

![20190430093935456.jpg][]

[20150926162617758]: /images/20210506/96ebfc5fa0b944499ed33f4442425625.png
[20190430093935456.jpg]: /images/20210506/e067676b75a84f09868f6038675651c9.png