最近，應公司要求需要制作一個彈出框，需求是在鼠標停留在字段上，就會彈出一個信息框彈出從后臺查出來的內容。因為本猿是后端開發，對于前端的東西是半桶水，一知半解，它認識我我不認識它。所以在此記錄一下Demo，以便下次方便使用。

首先需要創建一個前端HTML頁面，由于公司使用的是自己的框架，與普通HTML頁面還有一定差別，在這里只放出一部分代碼：

<th scope="col" role="columnheader" rowspan="1" data-index="2"class="k-header bottom-border"><a href="#" data-field="title" >頭</a></th>

另外就是必須要引入js：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

需要注意的是，Jquery文件一定要放在bootstrap文件前面，否則前端會出現報錯。接下來就是寫js了，公司框架規定不能使用id屬性，如果沒有規定的話，可以a標簽中使用ID標簽，在js中更好確認。

$("[data-field='title']").popover({html: true, /* 以HTML方式顯示數據 */title: title(), /*彈窗頭部 可以是方法，也可以是字符串'' */placement: 'bottom', /* 顯示位置 top bottom right left */delay: {show: 50, hide: 1000}, /* 我的理解是延遲顯示時間，和消失時間 */trigger: 'hover', /*觸發條件 click hover focus manual 我選擇的是鼠標移動到上面就 可以觸發彈窗*//* 彈窗內容 同樣可以是方法，也可以是字符串'' */content: function () {content();}}); function title() {return "彈窗測試"; } function content() {var inInfo = new EiInfo();var data = "";// 像后臺請求接口方法，這個需要根據自己的實際確定send("DMCM05", "query", inInfo, {onSuccess: function (outInfo) {var block = outInfo.getBlock('result');var arr = block.getRows();data += "<form><ul>";for (let i = 0; i < arr.length; i++) {data += '<li>' + arr[i].toString().replace(",", " : ") + '</li>';}data += "</ul></form>";$("[data-index='2'] .popover-content").append(data);},onFail: function (errorMsg, status, e) {console.log(errorMsg);}}) }

這樣就完成了一個字段的彈窗顯示，話不多說，來吧，展示

總結

以上是生活随笔為你收集整理的HTML配合js制作弹框，弹出信息框展示后台内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。