JavaScriptがaspxで動作しないC＃webpage

-1

スクリプトタグの中にasps Webページを置くと、JavaScriptが動作しません。コードは画像とコードにも含まれています。JavaScriptがaspxで動作しないC＃webpage

実際に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>

出典

2016-08-30 Mani Singh

を参照してください。また、あなたは働いていないものは教えてくれませんか？エラーがありますか？それは何かをやっていないのですか？それは何をすべきか？これは今のところ悪い質問です。 – DavidG

申し訳ありませんが、私は試みましたが、それは私にエラーを与えていました。私はそれに20分を費やし、画像を置くことに決めたよりも –

大丈夫です。二重引用符の中にコードを入れてください。本当に正直なところ、私はもう一度やろうとしていますが、どうやって解決するのか分かりません。私はコードボタンを押してコードを貼り付けるよりも同じエラーを表示します –

の作品ユーザーがOpen Modalボタンをクリックしたときにあなたの問題をコメントしたので、フォームを送信します。これは基本的にページをリロードしたことを意味します。あなたがする必要があるのは、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を作ったパンが言うように、私たちのコードではなく、スクリーンショットを与え、インラインコメント

出典

2016-08-30 04:46:14

あなたは私の問題を解決してくれた。私は本当にあなたの助けに感謝します。ありがとう –

JavaScriptがaspxで動作しないC＃webpage

答えて

関連する問題