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');
    });
}