0

我需要你的帮助。

通常可以使用：

var x = prompt("Please enter your name:","John Smith")

alert(x)

我同样想用我现有的自定义对话框/提示框来模仿上面的代码，但我似乎无法让它工作并检索 x 的值：

<!DOCTYPE html>
<html>
<head>


<script type="text/javascript">
function testit() {

var x = alertBox('Enter your firstname','prompt','John Smith')

alert(x)

}

function alertBox(text, type, ptext) {

    var button  =   '<div id="alertBox_button_div" ><input id="alertBox_button" class="button" style="margin: 7px;" type="button" value="Close" onclick="alertBox_hide()"></div>'

    var field   =   '<div><input id="ptext" class="field" type="text"></div>'

    if (type == "err") {
        document.getElementById('alertBox_text').innerHTML = text + button
        document.getElementById('alertBox_text').style.color = "#FF0000"
        document.getElementById('alertBox_text').style.top = "50%"
    }
    else if (type == "ok") {
        document.getElementById('alertBox_text').innerHTML = text + button
        document.getElementById('alertBox_text').style.top = "50%"
    }
    else if (type == "prompt") {
        document.getElementById('alertBox_text').innerHTML = text + field + button
        document.getElementById('alertBox_text').style.top = "25%"
        document.getElementById('alertBox_button').value = "OK"
        if (ptext) { document.getElementById('ptext').value = ptext }

    }
    else {
        document.getElementById('alertBox_text').innerHTML = text
    }

    document.getElementById('alertBox_container').style.visibility = 'visible'

}//end function

function alertBox_hide() {

    document.getElementById('alertBox_container').style.visibility = 'hidden'

}
</script>



<style type="text/css">
.field {
    border: 1px solid #808080;
    width: 475px;
    font-family: Arial;
    font-size: 9pt;
    padding-left: 3px;
    font-weight: bold;
    margin: 1px;
}
#alertBox {
    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    font-family: Arial;
    font-size: 9pt;
    visibility: hidden;
}

#alertBox_container {
    border: 1px solid #808080;
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 1px solid rgb(128,128,128);
    height: 100%;
    position: relative;
    color: rgb(11,63,113);
}

#alertBox_titlebar {
    cursor: pointer;
    height: 22px;
    width: 100%;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
    line-height:22px;
    font-weight: bold;
}
#alertBox_close {
    line-height: 10px;
    width: 17px;

    margin-top: 2px;
    margin-right: 2px;
    padding: 1px;

    position:absolute;
    top:0;
    right:0;

    font-size: 10px;
    font-family: tahoma;
    font-weight: bold;

    color: #464646;
    border: 1px solid;
    border-color: #999 #666 #666 #999;
    background-color:#ccc;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7'); 
}
#alertBox_close:hover {
    background-color: #ddd;        
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
    color: #000000;
}
#alertBox_text {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    text-align: center;
}
.button {
    color:              #464646;
    font-family:        Arial;
    font-size:          9pt;
    height:             23px;
    border:             1px solid;
    border-color:       #999 #666 #666 #999;
    background-color:   #ccc;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
    width: 67px;
}

}
.button:hover {
    background-color: #ddd;        
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
    color: #000000;
}
</style>
</head>
<body>

<input type="button" value="testme" onclick="testit()">
<br>
    <div id="alertBox">
        <div id="alertBox_container">
            <div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
            <div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
            <div id="alertBox_text"></div>
        </div>
    </div>

</body>
</html>
4

1 回答 1

1

由于 x 的值在未来事件之前是未知的，因此您需要一个异步回调。所以代替这个：

var x = alertBox('Enter your firstname','prompt','John Smith');
alert(x);

你需要这样的东西：

alertBox('Enter your firstname','prompt','John Smith', function(x) {
    alert(x);
    // call other code here, pass "x" as parameter
});

该alertBox函数应该有一个额外的参数callback，您可以在值准备好时调用它，例如：

function alertBox(text, type, ptext, callback) {
    // ...

    document.getElementById('alertBox_button').addEventListener("click", function() {
        callback(document.getElementById('ptext').value);
    });
}

这是一个小提琴演示。

于 2013-10-21T18:10:55.063 回答