javascript需要自定义提示框帮助

时间:2014-06-24 21:06:05

标签: javascript javascript-events return custom-controls prompt

所以我已经为javascript制作了一个自定义提示框,所以我不必使用库存,但我无法弄清楚如何直接从cPrompt()函数返回值。我希望能够像普通提示一样使用它并能够执行var name = cPrompt("Whats your name")之类的操作但是要关闭自定义提示我必须使用事件来触发一个名为ok()的函数,当单击一个按钮时。这会阻止我直接从cPrompt函数返回值。任何人都可以弄清楚我怎么能这样做?这是我的代码:

HTML:

    <html>
<head>
    <title>Custom Prompt</title>
</head>
<body>
    <p>content</p>
    <button onclick="cPrompt('Message goes here')">Click me</button>
    <div id="overlay"></div>
    <div id="pBox">
        <div id="cPromptOut" onclick="ok()"></div>
        <input type="text" id="cPromptIn"/>
    </div>
    <link rel='stylesheet' href='customPrompt.css'/>
    <script src='customPrompt.js'></script>
</body>
</html>

CSS:

#overlay{
    width:100%;
    height:100%;
    position:fixed;
    background-color:grey;
    opacity:0.5;
    z-index: 10;
    display: none;
    left:0;
    top:0;
}
#pBox{
    width:50%;
    height:30%;
    position:fixed;
    background-color:red;
    left:25%;
    top:20%;
    z-index: 11;
    display:none;
}
#cPromptOut{
    width:100%;
    height:50%;
    background-color: green;
    z-index: 12;
    text-align: center;
    font-size: 1.5em
}
#cPromptIn{
    width:100%;
    height:50%;
    border:1px solid black;
    text-align: center;
    font-size: 1.5em
}

JS:

var overlay = document.getElementById("overlay")
var pBox = document.getElementById("pBox")
var cPromptOut = document.getElementById("cPromptOut")
var In = document.getElementById("cPromptIn").value
function cPrompt(msg){

    overlay.style.display = "block";
    pBox.style.display = "block";
    cPromptOut.innerHTML = msg;

}
function ok(){
    overlay.style.display = "none";
    pBox.style.display = "none";
}

console.log(cPrompt("enter you name"))

所以现在我无法在框中收集价值。任何人都可以弄清楚我是如何做到这一点的。请记住,我希望能够像一个不得不使用任何其他类似的呼叫那样召唤它console.log(cPrompt("say something"))我可能试图过度思考或者可能不可能,任何想法都是受欢迎的。

1 个答案:

答案 0 :(得分:0)

编辑 - 好吧所以它不会像console.log那样简单(cPrompt('message')),但是有一种 kinda 方式来做你想做的事情。请参阅this fiddle改编自toby Ho's trampolines。由于某种原因,我不能使它在chrome中工作,但firefox可以解决这个问题。酷部分在main()中(它必须在run(main())调用

function main(){
    log('start listening');
    log(yield prompt('hello'));//the code "seems" to halt here.
    log('end script');
}

你再次提出一些非常困难的事情,所以它不会像你希望的那样容易,但就在这里。另外,告诉我们你到目前为止所尝试的内容真是太酷了。

编辑前:

乍一看,我会说这是不可能的。如果您的cPrompt()函数持有解释器以便它可以返回用户的输入,我认为页面将冻结。你试过这样的事吗?

//This will probably freeze the page
function cPrompt(_msg){
    ...//init the prompt
    while( input == null){}//your prompt sets input in an event
    return input;
}

通常的方法是传递一个这样的闭包

function whenInput(_input){console.log(_input);}
cPrompt('message', whenInput);

现在,我认为在js 1.7中可能有新的generators方法。

那么,你有什么尝试?