js前端弹出框实例

描述：点击按钮弹出弹出框

引入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');

});

}