0

我有以下代码用于在屏幕一角显示一个对话框，一旦我最初单击网页中的链接，它就会显示出来。我想只使用 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

Change the following in the script

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

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

Or

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

I cannot get the exact problem that you are having.Try spending some time with fiddle.It seems that you are new to stackoverflow.The next time you have any problem,make sure you give a fiddle with your code in it!!!That will surely give you accurate and more solutions.

于 2013-06-20T08:01:26.950 回答