网页弹出层并引起回调

来源:互联网 发布:戏曲服装淘宝网 编辑:程序博客网 时间:2024/05/22 10:55

弹出本页面的一个Div

首先引入在head部分加入:注意js引用的顺序。这两个js都是在网上可以下的

<link type="text/css" href="CSS/common.css" rel="stylesheet" />
    <script type="text/javascript" src="JS/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="JS/easydialog.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            $(".yoyo").click(function() {
                easyDialog.open({
                    container: 'divProductDetail'
                });
            }); //弹出

            $("#aClose").click(function() {
                easyDialog.close();
            });//关闭
        });
    </script>

在body部分加入:

<div id="divProductDetail" class="hide_box" style="display:none;">
        <h4><a id="aClose" href="javascript:void(0)" title="关闭窗口">&times;</a>详细信息</h4>
        <table>
        <tr>
        <td>ProductID:</td>
        <td><input type="text" id="txtProductID" /></td>
        </tr>
        <tr>
        <td>ProductName:</td>
        <td><input type="text" id="txtProductName" /></td>
        </tr>
        <tr>
        <td>ProductPrice:</td>
        <td><input type="text" id="txtProductPrice" /></td>
        </tr>
        <tr>
        <td>ProductDate:</td>
        <td><input type="text" id="txtProductDate" /></td>
        </tr>
        </table>
    </div>

原创粉丝点击