2016-08-30 53 views
-1

當我將它放入腳本標記中的asps網頁時,我的JavaScript不起作用。代碼也在圖像和代碼中。JavaScript不能在aspx中工作C#網頁

它實際上是一個模型箱打開相似圖片lightBox/fancyBox但只打開模型箱1秒,但在正常的HTML頁面

ASP and HTML code

JavaScript

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="img-model.aspx.cs" >Inherits="webpages_img_model" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>model box</title> 
<style> 
     /* The Modal (background) */ 
     .modal { 
      display: none; /* Hidden by default */ 
      position: fixed; /* Stay in place */ 
      z-index: 1; /* Sit on top */ 
      padding-top: 100px; /* Location of the box */ 
      left: 0; 
      top: 0; 
      width: 100%; /* Full width */ 
      height: 100%; /* Full height */ 
      overflow: auto; /* Enable scroll if needed */ 
      background-color: rgb(0,0,0); /* Fallback color */ 
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
     } 

     /* Modal Content */ 
     .modal-content { 
      background-color: #fefefe; 
      margin: auto; 
      padding: 20px; 
      border: 1px solid #888; 
      width: 60%; 
      height:auto; 
     } 

     /* The Close Button */ 
     .close { 
      color: #aaaaaa; 
      float: right; 
      font-size: 28px; 
      font-weight: bold; 
     } 
     .clear { 
      clear:both; 
     } 

      .close:hover, 
      .close:focus { 
       color: #000; 
       text-decoration: none; 
       cursor: pointer; 
      } 
      .modal-content .p1 { 
       float:left; 
       border-right:1px; 
       width:50%; 
      } 
      .modal-content .p2 { 
       float:right; 
       width:50%; 

      } 
      #img { 
      position:relative; 
      width:400px; 
      height:400px; 

     } 
    #img #mm{ 
      position:absolute; 
      top:0px; 
      right:0px; 
      z-index: 16; 
     } 
     #img img{ 
      width:100%; 
      height:auto; 
     } 
    </style> 


</head> 
<body> 

    <form id="form1" runat="server"> 

      <h2>Modal Example</h2> 
    <div id="img"> 
     <a href=""> 
      <img src="../images/1pic.jpg" width="400px" height="400px" /> 
      <span id="mm"><button id="d">MM</button> </span> 
     </a> 
    </div> 
    <!-- Trigger/Open The Modal --> 
    <button id="myBtn">Open Modal</button> 

    <!-- The Modal --> 
    <div id="myModal" class="modal"> 

     <!-- Modal content --> 
     <div class="modal-content"> 
      <span class="close">×</span> 

         <div class="p1" > 
          <img src="../images/1pic.jpg" height="100%" width="80%" > /> 
        </div> 

         <div class="p2"> 
       <p>Some text in the Modal..</p> <br /> 
     <p>Some text in the Modal..</p> <br /> 
     <p>Some text ithe Modal..</p> <br /> 
     <p>Some text in the Modal..</p> <br /> 
      <input id="Button1" type="button" value="button" /> 
         </div> 
      <div class="clear"></div> 
     </div> 

    </div> 
      <script type="text/javascript"> 
       var modal = document.getElementById('myModal'); 

       // Get the button that opens the modal 
       var btn = document.getElementById("myBtn"); 

       // Get the <span> element that closes the modal 
       var span = document.getElementsByClassName("close")[0]; 

       // When the user clicks the button, open the modal 
       btn.onclick = function() { 
       modal.style.display = "block"; 
       } 

       // When the user clicks on <span> (x), close the modal 
       span.onclick = function() { 
        modal.style.display = "none"; 
       } 

       // When the user clicks anywhere outside of the modal, close it 
      $window.onclick = function (event) { 
        if (event.target == modal) { 
         modal.style.display = "none"; 
        } 
       } 
     </script> 



     </form> 
</body> 
</html> 
+0

像龐說,給我們的代碼,不是截圖。你還沒有告訴我們什麼不工作?你有錯誤嗎?它沒有做它應該做的事嗎?它甚至應該做什麼?這是一個非常糟糕的問題。 – DavidG

+0

對不起,我試過了,但它給了我錯誤。我花了20分鐘,並決定把圖像 –

+0

好,我應該把代碼放在雙引號內。說實話,我想再做一次,但不知道如何。我按代碼按鈕,並粘貼代碼,它再次顯示相同的錯誤 –

回答

0

工作正如我評論你的問題,當用戶點擊打開模式按鈕時,它提交的表單基本上意味着重新加載頁面。你需要做的是在你的btn.onclick = function()函數上返回false。爲簡單起見我已經發布的所有代碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="img-model.aspx.cs" >Inherits="webpages_img_model" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>model box</title> 
    <style> 
     /* The Modal (background) */ 
     .modal { 
      display: none; /* Hidden by default */ 
      position: fixed; /* Stay in place */ 
      z-index: 1; /* Sit on top */ 
      padding-top: 100px; /* Location of the box */ 
      left: 0; 
      top: 0; 
      width: 100%; /* Full width */ 
      height: 100%; /* Full height */ 
      overflow: auto; /* Enable scroll if needed */ 
      background-color: rgb(0,0,0); /* Fallback color */ 
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
     } 

     /* Modal Content */ 
     .modal-content { 
      background-color: #fefefe; 
      margin: auto; 
      padding: 20px; 
      border: 1px solid #888; 
      width: 60%; 
      height:auto; 
     } 

     /* The Close Button */ 
     .close { 
      color: #aaaaaa; 
      float: right; 
      font-size: 28px; 
      font-weight: bold; 
     } 
     .clear { 
      clear:both; 
     } 

     .close:hover, 
     .close:focus { 
      color: #000; 
      text-decoration: none; 
      cursor: pointer; 
     } 
     .modal-content .p1 { 
      float:left; 
      border-right:1px; 
      width:50%; 
     } 
     .modal-content .p2 { 
      float:right; 
      width:50%; 
     } 
     #img { 
      position:relative; 
      width:400px; 
      height:400px; 
     } 
     #img #mm{ 
      position:absolute; 
      top:0px; 
      right:0px; 
      z-index: 16; 
     } 
     #img img{ 
      width:100%; 
      height:auto; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <h2>Modal Example</h2> 
     <div id="img"> 
      <!-- added # --> 
      <a href="#"> 
       <!-- I would set the dimensions width and height in CSS --> 
       <img src="../images/1pic.jpg" width="400" height="400" /> 
       <span id="mm"> 
        <button id="d">MM</button> </span> 
      </a> 
     </div> 
     <!-- Trigger/Open The Modal --> 
     <button id="myBtn">Open Modal</button> 

     <!-- The Modal --> 
     <div id="myModal" class="modal"> 
      <!-- Modal content --> 
      <div class="modal-content"> 
       <span class="close">×</span> 
       <div class="p1" > 
        <img src="../images/1pic.jpg" height="100" width="80" /> 
       </div> 
       <div class="p2"> 
        <p>Some text in the Modal..</p> <br /> 
        <p>Some text in the Modal..</p> <br /> 
        <p>Some text ithe Modal..</p> <br /> 
        <p>Some text in the Modal..</p> <br /> 
        <input id="Button1" type="button" value="button" /> 
       </div> 
       <div class="clear"> 
        &nbsp; 
       </div> 
      </div> 
     </div> 

     <script type="text/javascript"> 
      var modal = document.getElementById('myModal'); 

      // Get the button that opens the modal 
      var btn = document.getElementById("myBtn"); 

      // Get the <span> element that closes the modal 
      var span = document.getElementsByClassName("close")[0]; 

      // When the user clicks the button, open the modal 
      btn.onclick = function() { 
       modal.style.display = "block"; 
       /* added to prevent the page to submitting */ 
       return false; 
      } 

      // When the user clicks on <span> (x), close the modal 
      span.onclick = function() { 
       modal.style.display = "none"; 
      } 

      // When the user clicks anywhere outside of the modal, close it 
      /* got rid of the $window and just replaced it with window */ 
      window.onclick = function (event) { 
       if (event.target == modal) { 
        modal.style.display = "none"; 
       } 
      } 
     </script> 
    </form> 
</body> 
</html> 

我做了一些其他的變化,以及對HTML和JavaScript,請參閱內嵌批註

+0

謝謝先生,你已經解決了我的問題。我非常感謝你的幫助。謝謝 –