js中如何弹出一个可以输入多个信息的提示对话框 如何在javascript弹出的对话框中创建两个文本框
\u5982\u4f55\u7528JS\u5f39\u51fa\u201c\u6709\u8f93\u5165\u6846\u5e76\u5e26\u6709\u662f\u3001\u5426\u3001\u53d6\u6d88\u6309\u94ae\u201d\u7684\u5bf9\u8bdd\u6846\u3002\u5177\u4f53\u4ee3\u7801\u5982\u4e0b\uff1a
function disp_prompt()
{
var name=prompt("\u8bf7\u8f93\u5165\u60a8\u7684\u540d\u5b57","\u5c0f\u8d3e")
if (name!=null && name!="")
{
document.write("\u4f60\u597d\uff0c" + name + "\uff01\u4eca\u5929\u8fc7\u5f97\u597d\u5417\uff1f")
}
}
\u6269\u5c55\u8d44\u6599\uff1a
prompt() \u65b9\u6cd5\u7528\u4e8e\u663e\u793a\u53ef\u63d0\u793a\u7528\u6237\u8fdb\u884c\u8f93\u5165\u7684\u5bf9\u8bdd\u6846\u3002
\u5982\u679c\u7528\u6237\u5355\u51fb\u63d0\u793a\u6846\u7684\u53d6\u6d88\u6309\u94ae\uff0c\u5219\u8fd4\u56de null\u3002\u5982\u679c\u7528\u6237\u5355\u51fb\u786e\u8ba4\u6309\u94ae\uff0c\u5219\u8fd4\u56de\u8f93\u5165\u5b57\u6bb5\u5f53\u524d\u663e\u793a\u7684\u6587\u672c\u3002
\u5728\u7528\u6237\u70b9\u51fb\u786e\u5b9a\u6309\u94ae\u6216\u53d6\u6d88\u6309\u94ae\u628a\u5bf9\u8bdd\u6846\u5173\u95ed\u4e4b\u524d\uff0c\u5b83\u5c06\u963b\u6b62\u7528\u6237\u5bf9\u6d4f\u89c8\u5668\u7684\u6240\u6709\u8f93\u5165\u3002\u5728\u8c03\u7528 prompt() \u65f6\uff0c\u5c06\u6682\u505c\u5bf9 JavaScript \u4ee3\u7801\u7684\u6267\u884c\uff0c\u5728\u7528\u6237\u4f5c\u51fa\u54cd\u5e94\u4e4b\u524d\uff0c\u4e0d\u4f1a\u6267\u884c\u4e0b\u4e00\u6761\u8bed\u53e5\u3002
\u53c2\u8003\u8d44\u6599\uff1a
HTML DOM prompt() \u65b9\u6cd5
javascript\u5f39\u51fa\u7684\u5bf9\u8bdd\u6846\u4e2d\u521b\u5efa\u4e24\u4e2a\u6587\u672c\u6846
#Mydiv{
display:none;
text-align:center;
padding:20px;
padding-top:40px;
padding-left:100px;
padding-right:100px;
height:0px;
width:0px;
margin-top:180px;
background:#F4F4F4;
border:1px #CCCCCC solid;
border-right:#666666 1px solid;
border-bottom:#666666 1px solid;}
function $(id){return document.getElementById(id);}
function ShowDIV(){
if($("Mydiv").style.display=="block"){
$("Mydiv").style.display="none";
$("c").style.display="block";
$("thisspan").innerHTML = "\u60a8\u786e\u5b9a\u8981\u5728\u8fd9\u91cc\u6dfb\u52a0\u4e00\u7ec4\u53ef\u8f93\u5165\u6587\u672c\u6846\u5417\uff1f";
}else{
$("Mydiv").style.display="block";
$("c").style.display="none";
}
}
function AddHTML(){
$("thisspan").innerHTML = "";
}
\u60a8\u786e\u5b9a\u8981\u5728\u8fd9\u91cc\u6dfb\u52a0\u4e00\u7ec4\u53ef\u8f93\u5165\u6587\u672c\u6846\u5417\uff1f
思路：
如果要输入多个信息，那么原生的提示框肯定不符合要求，需要自己定义。
一般都是使用div层模拟提示框，这样就可以随便布局了。
代码示例：
1、定义CSS
<style type="text/css">
body {
height: 100%;
overflow: auto;
margin: 0;
}
#test_Div {
position: fixed;
_position: absolute;
top: 50%;
left: 50%;
border: 2px solid #C0C0C0;/*弹出框边框样式*/
background-color: #FFFFFF;/*弹出框背景色*/
display:none;
}
* html {
overflow: hidden;
position: absolute;
}
</style>
2、简单点，引入JQuery
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/js/jquery-ui-1.9.2.custom.min.js"></script>
3、弹出层
function show_Win(div_Win, tr_Title, event) {
var s_Width = document.documentElement.scrollWidth; //滚动 宽度
var s_Height = document.documentElement.scrollHeight; //滚动 高度
var js_Title = $(document.getElementById(tr_Title)); //标题
js_Title.css("cursor", "move");
//创建遮罩层
$("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");
//获取弹出层
var msgObj = $("#" + div_Win);
msgObj.css('display', 'block'); //必须先弹出此行，否则msgObj[0].offsetHeight为0，因为"display":"none"时，offsetHeight无法取到数据；如果弹出框为table，则为'',如果为div，则为block，否则textbox长度无法充满td
//y轴位置
var js_Top = -parseInt(msgObj.height()) / 2 + "px";
//x轴位置
var js_Left = -parseInt(msgObj.width()) / 2 + "px";
msgObj.css({ "margin-left": js_Left, "margin-top": js_Top });
//使弹出层可移动
msgObj.draggable({ handle: js_Title, scroll: false });
}
4、调用
<input type="button" value="测试弹出框" onclick="show_Win('div_Test', 'title', event)" />
<div id="div_Test">
<div id="title" style="border: 1px solid red;">标题</div>
内容
</div>
自定义~EXT或者jquery什么的都可以实现的~
绛旓細浣犲ソ锛屼綘璇寸殑鏄痺eb绋嬪簭鍚楋紵js浠ｇ爜锛歷ar inputStr = window.prompt("Please input data:");if(inputStr) { //鍙互鍒╃敤jquery杩涜ajax鎻愪氦 $.post(url, {"param":inputStr},function(response) { //鍥炶皟鍑芥暟浠ｇ爜 });}
绛旓細var str = prompt("璇杈撳叆\n浣犵殑濮撳悕");鍦ㄩ噷闈㈠姞涓崲琛岀
绛旓細鍙互杩欐牱鍒嗕笁琛岋細1 銆係tring m = "淇℃伅宸茬粡瀛樺湪锛屾柊鐨勪俊鎭細瑕嗙洊鍘熸潵淇℃伅锛 ";2 銆俰nt ok = JOptionPane.showConfirmDialog(this锛宮锛"纭"锛孞OptionPane.YES_NO_OPTION锛孞OptionPane.INformantion_MESSAGE);3 銆俰f(ok==JOPtionPane.YES_OPTION) {...} else{...} 娉ㄦ剰锛氭垜鎶婄浜岃鐨勯楀彿鎹㈡垚...
绛旓細{ if(webAddress.trim().substring(0,7) != "http://"){ webAddress = "http://" + webAddress;} location.href=webAddress;} } 鎵撳紑杩欎釜缃戦〉涔嬪悗浼寮瑰嚭杈撳叆妗嗭紝杈撳叆缃戝潃涔嬪悗纭锛屽脊鍑轰綘杈撳叆鐨缃戦〉
绛旓細璇ユ枃鏈鐢╠iv鍐欙紝鐢ㄦ埛鐐瑰嚮鏌愪釜鍦版柟鎴栨墦寮椤甸潰鏃跺脊鍑猴紝骞朵笖璁剧疆鏄剧ず鏃堕棿銆傜浉褰撲簬妯℃嫙涓涓脊鍑璀﹀憡淇℃伅
绛旓細 浣犵敤JS灏辫繖涔堝啓灏辫浜嗐 var atxt=document.getElementById('txt');var abtn=document.getElementById('btn');abtn.onclick=function(){ if(atxt.value.length>10||atxt.value.length<1){ alert('浣杈撳叆鐨瀛楃鏁板ぇ浜10鎴栧皬浜1')} } 杩欐牱搴旇灏辫浜嗐
绛旓細榛樿鐨勬ā寮忚緭鍏ュ璇濇鐨勮緭鍏瀛楃鏁板緢鐭紝鍙互鑷繁鍋涓涓瀵硅瘽妗嗭紙鐢╤tml鑷繁鍐欙紝閲岄潰鏀句竴涓<textarea>灏辫浜嗭級锛屼綘璇曚竴涓 銆傘傘
绛旓細display:none鈥濅笉鏄剧ず銆4.鎵撳紑鍚庢垜浠彂鐜板彧鏄剧ず杩欎竴涓滄墦寮鏂囦欢鈥濇寜閽5.鐜板湪鎴戜滑缁檅utton娣诲姞onclick浜嬩欢锛岃皟鐢╫penfile瑙﹀彂id涓衡渙pen鈥濈殑file銆6.鐜板湪鎴戜滑鍦ㄦ祻瑙堝櫒涓偣鍑烩滄墦寮鏂囦欢鈥濇枃浠舵寜閽氨浼氬脊鍑洪夋嫨鏂囦欢璺緞瀵硅瘽妗嗕簡銆傝繖鏍峰氨瑙ｅ喅浜js涓鐐瑰嚮涓涓寜閽寮瑰嚭涓涓file鏂囦欢妗嗙殑闂浜嗐
绛旓細涓嶆槸寰堢悊瑙ｄ綘瑕佺殑,杩欐槸渚濇嵁鎴戠悊瑙ｅ啓鐨,浣犵湅鏄笉鏄綘瑕佺殑 <!doctype html> 璁哄潧1璁哄潧2璁哄潧3璁哄潧4鎼滅储 var box = document.getElementsByTagName('input'); function search(){ for(var i=0;i<box.length;i++){ if(box[i].checked){ ...
绛旓細娑堟伅鏄彲浠ュ彔鍔寮瑰嚭鐨,鏈鏂扮殑娑堟伅浼氭帓鍦ㄦ秷鎭垪琛ㄧ殑鏈鍚庨潰銆傚綋鍓嶉潰鐨勬秷鎭秷澶卞悗,鍚庨潰鐨勬秷鎭細鏈変竴涓鍚戜笂婊戝姩鏁堟灉銆傜劧鍚庢秷鎭湰韬槸鏈変笁閮ㄥ垎缁勬垚娑堟伅鍥炬爣,鐢ㄦ潵鍖哄垎涓嶅悓绫诲瀷鐨勬秷鎭傛秷鎭枃鏈傚叧闂寜閽,骞朵笉鏄墍鏈夋秷鎭兘闇瑕佸叧闂寜閽2. 瀹炵幇鏍峰紡閭ｄ箞,涓嶇鎴戜滑鏄敤鍘熺敓js杩樻槸vue,棣栧厛鍛,鎴戜滑閮介渶瑕佹妸杩欎釜娑堟伅鐨勫熀鏈牱寮...
