如何自定义 JavaScript 提示？
[英]How to customize the JavaScript prompt?
问题描述
I am trying to use the JavaScript prompt for entering text that will be enclosed between tags eg
我正在尝试使用 JavaScript 提示输入将包含在标签之间的文本，例如
[url]http://www.yahoo.com[/url] [网址]http://www.yahoo.com[/url]
The problem is that the prompt always appear in the top left corner of the browser.问题是提示总是出现在浏览器的左上角。
How do I position such that it only display the prompt around the text area where the text will be entered?如何定位，使其仅在将输入文本的文本区域周围显示提示？
And also how do I customize the JavaScript prompt so that it look more user friendly?以及如何自定义 JavaScript 提示以使其看起来对用户更友好？
3 个解决方案
解决方案1
3 2012-02-08 12:39:14
You can't customize that (if you are refering at prompt()).您无法自定义（如果您在 prompt() 处引用）。 You need to create a pop up window and customize its insides.您需要创建一个弹出窗口并自定义其内部。
解决方案2
1 2012-02-08 12:42:05
You can't position the JavaScript prompt box, and you'll find it varies between different browsers.您无法定位 JavaScript 提示框，并且您会发现它因浏览器而异。
Although you didn't explicitly ask, may I suggest either creating your own prompt (as simple as making a div with an input and positioning absolutely, and setting the display CSS property correctly to "pop" it up and close it, or (and this is what I would do) use something like jQueryUI or a similar alternative that will do what you want.尽管您没有明确询问，我是否可以建议您创建自己的提示（就像使用绝对输入和定位制作 div 一样简单，并正确设置显示 CSS 属性以“弹出”并关闭它，或者（和这就是我会做的）使用类似 jQueryUI 或类似的替代品来做你想做的事。
One final bonus: just insert the [url][/url] tags with a placeholder domain or message imbeteen, and automatically highlight it and give it focus, so that when they start typing it will appear there, inline.最后一个好处：只需插入带有占位符域或消息 imbeteen 的 [url][/url] 标签，并自动突出显示它并给它焦点，这样当他们开始输入时，它就会出现在那里，内联。
解决方案3
0 2012-02-08 12:48:22
Here is an accepted way:这是一种公认的方式：
http://jqueryui.com/demos/dialog/ http://jqueryui.com/demos/dialog/
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Dialog - Modal confirmation</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#dialog-confirm" ).dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); console.log("deleted") }, Cancel: function() { $( this ).dialog( "close" ); console.log("cancelled") } } }); } ); </script> </head> <body> <div id="dialog-confirm" title="Empty the recycle bin?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> </div> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.