js 彈出div 輸入框，並返回輸入框的值給父頁面

div

<div class="pop-box" style="width: 500px" id="pop-div">
        <table class="style1">
            <tr>
                <td class="style2">不經過緣由：</td>
                <td><textarea id="result" rows="4" cols="56"></textarea></td>
            </tr>

            <br />
            <tr>
                <td align="center" colspan="2"><input type="button" value="肯定"
                    class="tab_but" onclick="saveDiv('pop-div');" /> <input
                    class="tab_but" type="button" value="關閉"
                    onclick="hideDiv('pop-div');" /></td>
            </tr>
        </table>
    </div>

 

 

js  

function popupDiv(div_id) {
    var div_obj = $("#" + div_id);
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = div_obj.height();
    var popupWidth = div_obj.width();
    div_obj.css({ "position": "absolute" }).animate({ left: windowWidth / 2 - popupWidth / 2,
        top: windowHeight / 2 - popupHeight / 2, opacity: "show"}, "show");

}

function hideDiv(div_id) {
    //checkData('0');
    $("#" + div_id).animate({ left: 0, top: 0, opacity: "hide" }, "slow"); //關閉彈出的DIV
    
}
 

 

css:

/* div pop window*/
 .pop-box
        {
            z-index: 9999;
            margin-bottom: fd3px;
            display: none;
            position: absolute;
            background: #ffffff;
            border: solid 1px #6e8bde;
        }
        .pop-box h4
        {
            color: #ffffff;
            cursor: default;
            height: 18px;
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            padding-left: 8px;
            padding-top: 4px;
            padding-bottom: 2px;
        }
        .pop-box-body
        {
            clear: both;
            margin: 4px;
            padding: 2px;
        }
        .style1
        {
            width: 98%;
        }
        .style2
        {
            width: 80px;
        }

 

頁面效果