diff --git a/skywalking-webui/src/main/webapp/bower_components/skywalking/js/analysisResultViewResovler.js b/skywalking-webui/src/main/webapp/bower_components/skywalking/js/analysisResultViewResovler.js
index c531fe44f64cdcdc8f7087dd717f1942f84de1fd..b1dd5ea9b816b6a17dd4abb30be7b77ec3d06208 100644
--- a/skywalking-webui/src/main/webapp/bower_components/skywalking/js/analysisResultViewResovler.js
+++ b/skywalking-webui/src/main/webapp/bower_components/skywalking/js/analysisResultViewResovler.js
@@ -2,6 +2,7 @@ function AnalysisResultViewResolver(param) {
     AnalysisResultViewResolver.prototype.baseUrl = param.baseUrl;
     AnalysisResultViewResolver.prototype.treeId = param.treeId;
     this.changetAnalyCondition("MONTH", this.getCurrentMonth());
+    this.bindGotoTypicalPageEvent();
 }
 
 AnalysisResultViewResolver.prototype.callChainTreeData = [];
@@ -39,7 +40,6 @@ AnalysisResultViewResolver.prototype.reloadMainPage = function () {
     $("#analyDate").val(this.analyDate);
 
     this.paintChainTreeDataTable();
-    this.bindGotoTypicalPageEvent();
 }
 
 AnalysisResultViewResolver.prototype.changetAnalyCondition = function (type, date) {
@@ -95,17 +95,17 @@ AnalysisResultViewResolver.prototype.showTypicalCallTree = function (nodeToken)
 }
 
 AnalysisResultViewResolver.prototype.sortTypicalCallChainTreeNode = function (callChainTreeNodeList) {
-    for (var i = 0 ; i < callChainTreeNodeList.length - 1; i++){
+    for (var i = 0; i < callChainTreeNodeList.length - 1; i++) {
         var testTraceLevelId = callChainTreeNodeList[i].traceLevelId;
         var index = i;
-        for (var j = i + 1; j < callChainTreeNodeList.length; j++){
-            if (!this.compareTraceLevelId(testTraceLevelId, callChainTreeNodeList[j].traceLevelId)){
+        for (var j = i + 1; j < callChainTreeNodeList.length; j++) {
+            if (!this.compareTraceLevelId(testTraceLevelId, callChainTreeNodeList[j].traceLevelId)) {
                 index = j;
                 testTraceLevelId = callChainTreeNodeList[j].traceLevelId;
             }
         }
 
-        if (index != i){
+        if (index != i) {
             var tmpNode = callChainTreeNodeList[i];
             callChainTreeNodeList[i] = callChainTreeNodeList[index];
             callChainTreeNodeList[index] = tmpNode;
@@ -167,9 +167,8 @@ AnalysisResultViewResolver.prototype.loadData = function (analyType, analyDate)
                         break;
                     }
                 }
-
                 self.paintChainTreeDataTable();
-                self.bindGotoTypicalPageEvent();
+
             }
         },
         error: function () {
@@ -196,67 +195,70 @@ AnalysisResultViewResolver.prototype.loadData = function (analyType, analyDate)
     })
 }
 
+function pickUpViewPoint(nodeToken) {
+    $("#viewpointStr").text($("#" + nodeToken + "ViewPoint").text());
+    $("#showTypicalCallTreeBtn").attr("value", nodeToken);
+    $("#viewPointPickupModal").modal('show');
+}
+
 AnalysisResultViewResolver.prototype.bindGotoTypicalPageEvent = function () {
     var self = this;
-    $("button[name='showTypicalCallTreeBtn']").each(function () {
-        $(this).click(function () {
-            var treeNodeToken = $(this).attr("value");
-            //$(".modal-backdrop").remove();
-            $("#modal" + treeNodeToken).modal('hide');
-            self.showTypicalCallTree(treeNodeToken);
-
-            var template = $.templates("#typicalCallChainTreesTmpl");
-            var htmlOutput = template.render({
-                "entryViewPoint": self.callEntrance,
-                "currentViewPoint": $("#" + treeNodeToken + "ViewPoint").text()
-            });
-            $("#mainPanel").empty();
-            $("#mainPanel").html(htmlOutput);
-
-            template = $.templates("#typicalTreeCheckBoxTmpl");
-            htmlOutput = template.render({"typicalTreeIds": self.currentTypicalTreeNodeMapping.typicalTreeIds});
-            $("#typicalCheckBoxDiv").empty();
-            $("#typicalCheckBoxDiv").html(htmlOutput);
-
-            $("input[name='typicalTreeCheckBox']").each(function () {
-                $(this).change(function () {
-                    var treeIds = new Array();
-                    $("input[name='typicalTreeCheckBox']").each(function () {
-                        if ($(this).prop("checked")) {
-                            treeIds.push($(this).attr("value"));
-                        }
-                    });
-                    var tmpTpicalTreeNodes = {};
-                    self.currentTypicalTreeNodes.callChainTreeNodeList = [];
-                    for (var i = 0; i < treeIds.length; i++) {
-                        var tmpNodes = self.currentTypicalTreeNodeMapping[treeIds[i]];
-                        for (var j = 0; j < tmpNodes.length; j++) {
-                            if (tmpTpicalTreeNodes[tmpNodes[j].nodeToken] == undefined || tmpTpicalTreeNodes[tmpNodes[j].nodeToken] == "") {
-                                self.currentTypicalTreeNodes.callChainTreeNodeList.push(tmpNodes[j]);
-                                tmpTpicalTreeNodes[tmpNodes[j].nodeToken] = {};
-                            }
+    $("#showTypicalCallTreeBtn").click(function () {
+        var treeNodeToken = $(this).attr("value");
+        $("#viewPointPickupModal").modal('hide');
+        self.showTypicalCallTree(treeNodeToken);
+
+        var template = $.templates("#typicalCallChainTreesTmpl");
+        var htmlOutput = template.render({
+            "entryViewPoint": self.callEntrance,
+            "currentViewPoint": $("#" + treeNodeToken + "ViewPoint").text()
+        });
+        $("#mainPanel").empty();
+        $("#mainPanel").html(htmlOutput);
+
+        template = $.templates("#typicalTreeCheckBoxTmpl");
+        htmlOutput = template.render({"typicalTreeIds": self.currentTypicalTreeNodeMapping.typicalTreeIds});
+        $("#typicalCheckBoxDiv").empty();
+        $("#typicalCheckBoxDiv").html(htmlOutput);
+
+        $("input[name='typicalTreeCheckBox']").each(function () {
+            $(this).change(function () {
+                var treeIds = new Array();
+                $("input[name='typicalTreeCheckBox']").each(function () {
+                    if ($(this).prop("checked")) {
+                        treeIds.push($(this).attr("value"));
+                    }
+                });
+                var tmpTpicalTreeNodes = {};
+                self.currentTypicalTreeNodes.callChainTreeNodeList = [];
+                for (var i = 0; i < treeIds.length; i++) {
+                    var tmpNodes = self.currentTypicalTreeNodeMapping[treeIds[i]];
+                    for (var j = 0; j < tmpNodes.length; j++) {
+                        if (tmpTpicalTreeNodes[tmpNodes[j].nodeToken] == undefined || tmpTpicalTreeNodes[tmpNodes[j].nodeToken] == "") {
+                            self.currentTypicalTreeNodes.callChainTreeNodeList.push(tmpNodes[j]);
+                            tmpTpicalTreeNodes[tmpNodes[j].nodeToken] = {};
                         }
                     }
+                }
 
-                    self.sortTypicalCallChainTreeNode(self.currentTypicalTreeNodes.callChainTreeNodeList);
+                self.sortTypicalCallChainTreeNode(self.currentTypicalTreeNodes.callChainTreeNodeList);
 
-                    template = $.templates("#typicalTreeTableTmpl");
-                    var htmlOutput = template.render((self.convertAnalysisResult(self.currentTypicalTreeNodes)));
-                    $("#typicalTreeTableDataBody").empty();
-                    $("#typicalTreeTableDataBody").html(htmlOutput);
+                template = $.templates("#typicalTreeTableTmpl");
+                var htmlOutput = template.render((self.convertAnalysisResult(self.currentTypicalTreeNodes)));
+                $("#typicalTreeTableDataBody").empty();
+                $("#typicalTreeTableDataBody").html(htmlOutput);
 
-                });
             });
+        });
 
-            template = $.templates("#typicalTreeTableTmpl");
-            var htmlOutput = template.render((self.convertAnalysisResult(self.currentTypicalTreeNodes)));
-            $("#typicalTreeTableDataBody").empty();
-            $("#typicalTreeTableDataBody").html(htmlOutput);
+        template = $.templates("#typicalTreeTableTmpl");
+        var htmlOutput = template.render((self.convertAnalysisResult(self.currentTypicalTreeNodes)));
+        $("#typicalTreeTableDataBody").empty();
+        $("#typicalTreeTableDataBody").html(htmlOutput);
 
-            $("#rebackCallChainTreeBtn").click(function () {
-                self.reloadMainPage();
-            });
-        })
+        $("#rebackCallChainTreeBtn").click(function () {
+            self.reloadMainPage();
+        });
     });
 }
 
diff --git a/skywalking-webui/src/main/webapp/pages/anls-result/analysisResult.ftl b/skywalking-webui/src/main/webapp/pages/anls-result/analysisResult.ftl
index acd62ebfbb2377f46b332206f683d85e00babe2a..393b407fb216f634e0cae4f9ea7fc8263874bbab 100644
--- a/skywalking-webui/src/main/webapp/pages/anls-result/analysisResult.ftl
+++ b/skywalking-webui/src/main/webapp/pages/anls-result/analysisResult.ftl
@@ -58,9 +58,8 @@
                 <td rowspan="{{>rowSpanCount}}" valign="middle">{{>traceLevelId}}</td>
             {{/if}}
             <td>
-                <a href="javascript:void(0);" data-toggle="modal" data-target="#modal{{>nodeToken}}">{{>viewPoint}}</a>
+                <a href="javascript:pickUpViewPoint('{{>nodeToken}}');"> {{>viewPoint}}</a>
                 <span style="display:none" id="{{>nodeToken}}ViewPoint">{{>viewPoint}}</span>
-
                  </div>
             </td>
             <td>{{>anlyResult.totalCall}}</td>
@@ -80,8 +79,6 @@
             <span id="{{>nodeToken}}" style="display:none">{{>anlyResultStr}}</span></td>
 
         </tr>
-
-
 </script>
 </#macro>
 
@@ -99,7 +96,7 @@
                         <div class= "row">
                             <div  class="col-md-10">
                                 <label>viewpoint：</label><br/>
-                                <span style="word-wrap:break-word;">{{>viewPointStr}}</span>
+                                <span style="word-wrap:break-word;" id="viewpointStr"></span>
                             </div>
                         </div>
                     </div>
@@ -145,7 +142,6 @@
       </div>
     </div>
     <hr/>
-
 </script>
 </#macro>
 
@@ -155,7 +151,6 @@
     {{for typicalTreeIds}}
         <input name="typicalTreeCheckBox" type="checkbox" checked value="{{>callTreeToken}}"/>典型调用链{{: #index}}&nbsp;
     {{/for}}
-
 </script>
 </#macro>
 
@@ -166,7 +161,7 @@
                 <td rowspan="{{>rowSpanCount}}" valign="middle">{{>traceLevelId}}</td>
             {{/if}}
             <td>
-                <a href="javascript:void(0);" data-toggle="modal" data-target="#modal{{>nodeToken}}">{{>viewPoint}}</a>
+                <span>{{>viewPoint}}</span>
             </td>
             <td>{{>anlyResult.totalCall}}</td>
             <td>{{>anlyResult.correctNumber}}</td>
@@ -184,8 +179,6 @@
             <td>{{>anlyResult.averageCost}}ms
             <span id="{{>nodeToken}}" style="display:none">{{>anlyResultStr}}</span></td>
         </tr>
-
-
 </script>
 </#macro>
 
diff --git a/skywalking-webui/src/main/webapp/pages/main.ftl b/skywalking-webui/src/main/webapp/pages/main.ftl
index c8581c473a97d6812deae7c0ed6278c0f8814f17..18be3eaf22034e4f0033278da47e0464d45559a2 100644
--- a/skywalking-webui/src/main/webapp/pages/main.ftl
+++ b/skywalking-webui/src/main/webapp/pages/main.ftl
@@ -48,6 +48,7 @@
 <@anlyResult.typicalCallChainTrees/>
 <@anlyResult.typicalCallChainTreeTable/>
 <@anlyResult.typicalCallChainCheckBox/>
+<@anlyResult.viewPointPickUp/>
 <p id="baseUrl" style="display: none">${_base}</p>
 <div class="container" id="mainPanel">
     <p id="searchType" style="display: none">${searchType!''}</p>