0

画面の隅にダイアログを表示するための次のコードがあり、最初に Web ページのリンクをクリックするとすぐに表示されるはずです。HTML と Javascript のみを使用してそれを実行したい (現在 jQuery を学習する時間や帯域幅がない)。何を試しても、リンクをクリックしても表示されません。理由はありますか？ありがとう！

これは、必要なすべての要素を含む私の html ファイルです。

<!DOCTYPE html>
<head>
    <title>Restraint Dialog</title>

    <style>
    .modalDialog {
        position: absolute;
        font-family: arial;
        font-size:80%;
        top: 0;
        right: 0;
        background: rgba(0,0,0,0.2);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    .modalHeader h2 { color: #189CDA; border-bottom: 2px groove #efefef; }
    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    .modalDialog > div {
        width: 300px;
        position: relative;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: #fff;
    }
    .modalDialog .modalHeader  {    padding: 5px 20px 0px 20px; }
    .modalDialog .modalContent {    padding: 0px 20px 5px 20px; }
    .modalDialog .modalFooter  {    padding: 8px 20px 8px 20px; }
    .modalFooter {
        background: #F1F1F1;
        border-top: 1px solid #999;
        -moz-box-shadow: inset 0px 13px 12px -14px #888;
        -webkit-box-shadow: inset 0px 13px 12px -14px #888;
        box-shadow: inset 0px 13px 12px -14px #888;
    }
    .modalFooter p {
        color:#D4482D;
        text-align:right;
        margin:0;
        padding: 5px;
    }
    .ok, .close, .cancel {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    .close {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
    .ok, .cancel {
        width:80px;
        margin-left:20px;
    }

    .ok:hover { background: #189CDA; }
    .close:hover, .cancel:hover { background: #D4482D; }
    .clear { float:none; clear: both; }

    </style>
</head>

<body>

     <a href="javascript:restraintEditor();">Click to open restraints window</a>

     <div id="restraintContainer" class="modalDialog">
           <div>
        <div class="modalHeader">
            <h2>Restraint Editor</h2>
            <!--<a href="#close" title="Close" class="close">X</a>-->
        </div>

        <div class="modalContent">
          <div id="restraintLabel"> Name </div>
                    <div id="restraintText">
            <input type="text" id="restraintName" name="restraintName" value="" style="width:200px;"/>
          </div>

          <div id="restraintDir"> 
            <div id="restraintDirX">
              <input type="checkbox" id="restraintX" name="restraintX" value="XDir" checked="checked"/>
                <label for="restraintX"> Restrain in X-direction </label>
            </div>
            <div id="restraintDirY">
              <input type="checkbox" id="restraintY" name="restraintY" value="YDir" checked="checked"/>
                <label for="restraintY"> Restrain in Y-direction </label>
            </div>
            <div id="restraintDirZ">
              <input type="checkbox" id="restraintZ" name="restraintZ" value="ZDir" checked="checked"/>
                <label for="restraintZ"> Restrain in Z-direction </label>
            </div>
          </div>

                </div>

        <div class="modalFooter">
          <a href="#ok" title="Ok" class="ok">Ok</a>
          <a href="#cancel" title="Cancel" class="cancel">Cancel</a>
        <div class="clear"></div>

             </div>

     </div>

<script>

function restraintEditor() {
  var restrCont = document.getElementById("restraintContainer");
    restrCont.style.display="block";
    restrCont.style.visibility="visible";
}

</script>

</body>
</html>
4

2 に答える 2

0

スクリプトで次のように変更します

function restraintEditor() {
    var restrCont = document.getElementById("restraintContainer");
    restrCont.style.opacity="1";
}

http://jsfiddle.net/VYnt2/1/

または

function restraintEditor() {
    document.getElementById("restraintContainer").style.opacity="1";
}
于 2013-06-20T08:01:20.057 に答える
0

あなたが抱えている問題を正確に把握できません.フィドルで時間をかけてみてください.スタックオーバーフローに慣れていないようです.次回問題が発生したときは、コードにフィドルを付けてください!!!それきっとあなたに正確でより多くの解決策を提供します。

于 2013-06-20T08:01:26.950 に答える