使用Javascript顯示對話框

我有以下代碼用於在屏幕的角落顯示對話框，並且一旦我最初單擊網頁中的鏈接，它就會顯示出來。我只想使用HTML和Javascript（現在沒有時間或帶寬來學習jQuery）。無論我嘗試什麼，點擊鏈接後都不會顯示出來。任何想法爲什麼？謝謝！使用Javascript顯示對話框

這是所有必要的元素，我的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>

來源

2013-06-20 Srini Ragho

更改腳本以下

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-20 08:01:20 Gezzasa

感謝Gezzasa。我看到它現在正在工作！ –

我無法得到確切的問題，你有。試着花一些時間與小提琴。它似乎你是新的stackoverflow.The下一次你有任何問題，確保你在它的代碼小提琴！這肯定會給你準確和更多的解決方案。

來源

2013-06-20 08:01:26

這可以是一個評論.. –

沒有選擇直接添加評論的問題。可能它需要更多的聲譽。 – 2013-06-20 09:35:54

對不起，延遲迴復。是的，因爲你猜我是這個論壇的新手。我發佈了這個，後來想通過使用表單元素來解決我的問題的另一種方法。然而，我仍然好奇爲什麼組成我的對話框的div中的元素在點擊鏈接（對應於「點擊打開約束窗口」）後並未顯示在html頁面上。 –

使用Javascript顯示對話框

回答

相關問題