使用javascript和CSS自定义提示框

Custom prompt box using javascript and CSS

本文关键字：提示 自定义 CSS javascript 使用      更新时间：2023-09-26

我正在制作一个自定义提示框。到目前为止，我使用了一个隐藏的div，显示在一个按钮点击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>

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

不，这是不可能的

prompt打开一个模态对话框并阻止所有进一步的JavaScript(和与页面的交互)，直到其中一个按钮被用户激活。

当您将表单字段插入HTML文档时，没有阻塞(也不可能有阻塞，因为这会阻止用户填写表单)。

您需要将事件侦听器绑定到您创建的表单字段，然后像处理其他异步操作一样处理响应。

似乎你正在使用jquery，所以这里将是一个解决方案:

$('#result').val()

将从你的输入

中获取当前值(文本/数字等)

现在你可以简单地把它传递给你的函数，像这样:

$('#btnOK').on('click', function() {
  openPromptBox($('#result').val());
});

。

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

function openPromptBox(textFromInput){
   alert(textFromInput);
}

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

更新:

如果没有JQuery，它将是:

document.getElementById("result").value

将获取输入

的值

onclick动作的示例和下面的函数调用

document.getElementById("btnOK").addEventListener('click', function() {
  openPromptBox(document.getElementById("result").value);
});

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

相关文章：