描述：點擊按鈕彈出彈出框

引入jquery-ui相關組件
? ? <script type="text/javascript" src="../fe-res/js/jquery-ui.js"></script>
? ? <link href="../fe-res/css/plugins/jquery-ui.css" rel="stylesheet" />

jsp中隱藏的內容：
?<div id="pdailog" style="display:none;" >
? ? <div id="tree" ?>
? ? ? ? <input type="text" value="" class="bi-ipt" id="organ_name" style="width: 300px" ?placeholder="請輸入組織名稱或用戶名稱進行模糊搜索">
? ? ? ? <div id="treecontents"></div>
? ? ? ? <div>
? ? ? ? ? ? <button id="pdailog-cancel" class="btn btn-slight">確認</button>
? ? ? ? </div>
? ? </div>
</div>

?<input class="bi-btn bi-btn-primary" οnclick="connectUser()" type="button" value="關聯用戶"></input>

js：
function connectUser(){

? ? $("#pdailog").dialog({title: '關聯用戶',
? ? ? ? ? ? width: 500,
? ? ? ? ? ? height: 600,
? ? ? ? ? ? closed: false,
? ? ? ? ? ? cache: false,
? ? ? ? ? ? modal: true
? ? ? ? }
? ? );
? ? $("#pdailog-cancel").on("click",function () {
? ? ? ? $("#pdailog").dialog('close');
? ? });
}

總結

以上是生活随笔為你收集整理的js前端弹出框实例的全部內容，希望文章能夠幫你解決所遇到的問題。

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