2016-08-30 20 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

谢谢先生,你已经解决了我的问题。我非常感谢你的帮助。谢谢 –