我想在點擊選擇大學後顯示我的模式框，如何做到這一點？

我想顯示我的模式框後點擊進入選擇列表，但在這一刻怎麼做，任何人都可以幫助我請:(我想在點擊選擇大學後顯示我的模式框，如何做到這一點？

正如你可以看到我的照片，點擊「請選擇大學」後我想要顯示我的「模態框」...我不希望模型框的源代碼...我已經編碼..pls檢查我的源，但問題是如何顯示它後點擊「選擇列表」？？

enter image description here

請幫忙怎麼辦呢

這裏是我的源代碼：

<html> 
<head> 
    <title> 
     Select your college from the list. 
    </title> 
    <style> 
     #img{ 
      width: 104%; 
      z-index: 1; 
      height: 355px; 
      overflow: hidden; 
      padding: 0px; 
      margin-top: -9px; 
      margin-left: -8px; 
      margin-right: -2px; 
     } 

     .font{ 
      font-family: "Segoe UI Light"; 
      float: left; 
     } 

     *{ 
      margin: 5; 
      padding: 0; 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
      text-align: center; 
     } 

     select::-ms-expand{ 
      display: none; 
     } 

     body{ 
      background: #444; 
     } 

     select{ 
      width: 50%; 
      color: #A0A0A0 ; 
      font-size: 1em; 
      line-height: 1.2em; 
      margin: 0 0 10px; 
      padding: 6px 0; 
      border: 0 none; 
      cursor: pointer; 
      text-indent: 0.01px; 
      text-overflow: ""; 
      back-image: none; 
      -webkit-appearance: none; 
      border: 1px solid #DDDDDD; 
      -moz-appearance: none; 
      -ms-appearance: none; 
      apperance: none; 

     } 

     select option{ 
      background: #444; 
     } 

     a:link{ 
      display: block; 
      color: #663333; 
      background-color: #B80000 ; 
      width: 120px; 
      text-align: center; 
      height: 45px; 
      padding: 10px; 
      text-decoration: none; 
      cursor: default; 
     } 

     a:hover{ 
      background-color: #D80000; 
     } 

     .float{ 
      float: right; 
      font-family: "Segoe UI Light"; 
     } 

     .modalDialog{ 
      position: fixed; 
      font-family: "Segoe UI Light"; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 
      background: rgba(0, 0, 0, 0.8); 
      z-index: 99999; 
      opacity: 0; 
      -webkit-transition: opacity 400ms ease-in; 
      -moz-transition: opacity 400ms ease-in; 
      pointer-events: none; 
     } 

     .modalDialog:target { 
      opacity:1; 
      pointer-events: auto; 
     } 

     .modalDialog > div { 
      width: 400px; 
      position: relative; 
      margin: 10% auto; 
      padding: 5px 20px 13px 20px; 
      border-radius: 10px; 
      background: #fff; 
      background: -moz-linear-gradient(#fff, #999); 
      background: -webkit-linear-gradient(#fff, #999); 
      background: -o-linear-gradient(#fff, #999); 
     } 

     .close { 
      background: #606061; 
      color: #FFFFFF; 
      line-height: 25px; 
      position: absolute; 
      right: -12px; 
      text-align: center; 
      top: -10px; 
      width: 24px; 
      text-decoration: none; 
      font-weight: bold; 
      -webkit-border-radius: 12px; 
      -moz-border-radius: 12px; 
      border-radius: 12px; 
      -moz-box-shadow: 1px 1px 3px #000; 
      -webkit-box-shadow: 1px 1px 3px #000; 
      box-shadow: 1px 1px 3px #000; 
     } 

     .close:hover { background: #00d9ff; } 

    </style> 
    <body> 
     <img id="img" src="images/party_girls.jpg" alt="Select_your_college" /> 

    <h1 class="font"><font color="white">Welcome</font></h1> 
     <br><br><br><br> 
     <br><br> 
     <select> 
      <option selected="selected">Please select your college</option> 
      <option>Maharishi Arvind International Institute of technology, kota-rajasthan</option> 
     </select> 

     <a href="#openModal"></a> 
     <div id="openModal" class="modalDialog"> 
      <div> 
       <a href="#close" title="close" class="close">X</a> 
       <h2>We are sorry..</h2> 
       <p>At this moment, only one college can be selected we are working on others college, if your college is listed then you could join this.</p> 
      </div> 
     </div> 
     <br><br><br><br><br><br> 
    <a href="" class="float">Next</a> 
    </body> 
</head> 
</html>

來源

2014-03-04 user3326455

如果我是你，我會下降使用'
'來代替並使用CSS'margin'。 ''也是這樣，你可以使用CSS。這樣你會分離內容和風格，這使得你的網頁更輕，更好的渲染和更容易閱讀（屏幕閱讀器，機器人等） – MysticEarth

好的...我會盡力謝謝:) – user3326455

我想在點擊選擇大學後顯示我的模式框，如何做到這一點？

回答

相關問題