使用javascript和CSS的自定义提示框 [英] Custom prompt box using javascript and CSS

问题描述

我正在使用自定义提示框.到目前为止，我使用了一个隐藏的div，该隐藏的div通过javascript单击按钮上显示:

I am working on a custom prompt box. So far I used a hidden div that is shown on a button click with javascript:

function openPromptBox() {
var pos = FindXY(document.promptForm);
var cont = $('promptContainer');
var searchBox = $('promptBox');

searchBox.style.left = (pos.x - 20) + "px";
searchBox.style.top = (document.body.scrollTop + 100) + "px";

cont.style.display = "block";
}

这是div:

<div id="promptContainer">
<div id="promptBox">
    <table>
        <tr>
            <td colspan="2">
                <input type="text" name="result" id="result" size="25"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btnOK" value="OK" />
            </td>
            <td>
                <input type="button" id="btnCancel" value="Cancel" />
            </td>
        </tr>   
    </table>
</div>          
</div>

现在，每当单击 btnOK 按钮时，我都需要返回函数 openPromptBox 文本框 result 的值.有什么办法吗?

Now I need to return to the function openPromptBox the value of textbox result whenever btnOK button is clicked. Is there any way to do that?

推荐答案

似乎您正在使用jquery，因此这是一个解决方案:

It seems like you are using jquery so here would be a solution:

$('#result').val()

将从您的输入中删除当前值(文本/数字/等)

Would take the current value (the text / number / etc) out of your input

现在您可以像这样将其简单地传递给函数:

now you can simply pass it to your function like so:

$('#btnOK').on('click', function() {

  openPromptBox($('#result').val());

});

就是这样.

在函数的定义中，您可能应该添加一个参数，然后在函数中使用该参数:

In the definition of your function you should probably add a parameter which is then used in the function:

function openPromptBox(textFromInput){

   alert(textFromInput);

}

JSFiddle: https://jsfiddle.net/01bkkgzd/2/

JSFiddle: https://jsfiddle.net/01bkkgzd/2/

更新:

如果没有JQuery，它将是:

Without JQuery it would be:

document.getElementById("result").value

它将获取输入的值

onclick操作和以下函数调用的示例

Example for the onclick action and the following function call

document.getElementById("btnOK").addEventListener('click', function() {

  openPromptBox(document.getElementById("result").value);

});

JSFiddle: https://jsfiddle.net/01bkkgzd/5/

JSFiddle: https://jsfiddle.net/01bkkgzd/5/

这篇关于使用javascript和CSS的自定义提示框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！