5

特定のページでユーザーはボタンを押しますが、実際の処理の前にボタンを押すoptionsと、適切なものを選択するためのリストをユーザーに提示し、その選択を使用して処理を続行できるようにする必要があります。したがって、基本的には、利用可能なオプションを含むボックス
を表示するポップアップ ウィンドウを表示し、ユーザーの選択を取得してから処理を続行する必要があります。 これを行うには、次の組み合わせが必要であることが わかりました select
window->open/prompt/showModalDialog

var newWindow = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");  
newWindow.document.write("<select>");   
newWindow.document.write("<option>");  
newWindow.document.write(obj);  
newWindow.document.write("</option>");  
newWindow.document.write("</select>");

オプションを 1 つだけ渡す例。
しかし、選択を元に戻す方法が見つからないようです。
一方prompt、 は選択を返しますが、それを表示させることはできないと思いますselect。
はshowModalDialog選択を返しますが、別の Web ページをパラメーターとして期待しているようです。だから私には向いていません。

プレーンな JavaScript を使用してポップアップを作成するにはどうすればよいですか?

4

2 に答える 2

8

開いているウィンドウから値を取得できるようにする簡単なソリューションを次に示します。必要なのは、開いているウィンドウに JavaScript コードを挿入することだけです。このコードは、以下を使用して親ウィンドウと対話しますwindow.opener。

HTML

<input id="value" />
<button onclick="openWindow();">Open</button>

JavaScript

function openWindow() {
    var i, l, options = [{
       value: 'first',
       text: 'First'
    }, {
       value: 'second',
       text: 'Second'
    }],
    newWindow = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");  

    newWindow.document.write("<select onchange='window.opener.setValue(this.value);'>");
    for(i=0,l=options.length; i<l; i++) {
        newWindow.document.write("<option value='"+options[i].value+"'>");  
        newWindow.document.write(options[i].text);  
        newWindow.document.write("</option>");
    }
    newWindow.document.write("</select>");
}

function setValue(value) {
    document.getElementById('value').value = value;
}

ここでの実例: http://jsbin.com/uqamiz/1/edit

于 2013-06-07T20:35:27.587 に答える
2

最も簡単な方法は、オーバーレイとして機能する透明な背景を使用して、高い z-index を使用して重ね合わせた div を作成することです。次に、オーバーレイの上に中央に配置され（z-indexが高い）、リストマークアップを含む別のdivを作成できます

CSS

#shim {
opacity: .75;
filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
-khtml-opacity: .75;
-moz-opacity: .75;
background: #B8B8B8;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index:990
}

#msgbx {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 350px;
margin-top: -75px;
margin-left: -175px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 3px 3px 7px #777;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
z-index:999
}

HTML

<div id="shim"></div>
<div id="msgbx">inject list markup here</div>

ポップアップを表示するには

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="block";

隠れる

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="none";
于 2013-06-07T20:15:01.657 に答える