带有图像和文本输入的消息框 - Message box with image and text input

Message box with image and text input

本文关键字：消息输入文本图像 | 更新日期: 2023-09-27

我需要能够显示图像以及两行输入文本。我想知道是否有人知道一个好的简约插件可以做到这一点。它用于代理类似验证码的文本。不是太大。

谢谢！

我会推荐jQuery Tools，特别是Overlay。它看起来像这样：

<div id="overlay">
    <div><img src="" id="picture" /></div>
    <div><input type="text /><input type="text" /></div>
    <button class="close">Submit</button>
</div>

使用基本覆盖代码：

$("#overlay").overlay({
    closeOnClick: false,
    closeOnEsc: false
});

然后，可以使用 onBeforeClose 事件执行任何提交操作、验证等（此处的文档）。

如果需要在加载页面后更改图像，可以使用以下内容：

$("#picture").attr("src", varWithSource);

如果需要，您还可以使用jQuery Tools的表单工具进行验证，并将其构建为覆盖层中的表单。