2 Replies - 828 Views - Last Post: 25 January 2010 - 07:57 AM

#1 s_kucksdorf  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 69
  • Joined: 12-May 09

Disable web link using j/s

Posted 24 January 2010 - 09:35 PM

Hello all,

I am writing some javascript that (when a link is clicked) pops up with a new form (just a div). What I want to happen is when that link is clicked have the page (body) become have some opacity. This includes the user not being able to interact with the page. However I am coming to find out that the link is still active, and my cursor still changes when I hover over some of the elements I have. I would prefer to do this client side (I am using ASP.net to build this). Here's some code.

<head runat="server">
   <title>Login Page</title>
   <style type="text/css">
	  .CreateUserForm
	  {
		 position: fixed;
		 width: 300px;
		 visibility: hidden;
	  }
	  .CUFMenu
	  {
		 text-align: right;
		 background-color: Menu;
		 color: Black;
		 font-style: normal;
	  }
   </style>

   <script type="text/javascript">
   function CUF_Load()
   {
	  document.getElementById('CreateUserForm').style.top = '0px';
	  document.getElementById('CreateUserForm').style.left = '0px';
   }
   
   function close_CUF()
   {
		document.getElementById('body').style.cssText = "";
	  document.getElementById('CreateUserForm').style.visibility='hidden';
	  document.getElementById('CreateUserForm').style.zIndex = 0;
		for (var i = 0; i < table.rows.length; i ++)
		   for (var j = 0; j < table.rows.item(i).cells.length; j ++)
			  table.rows.item(i).cells.item(j).disabled = false;
   }
   function open_CUF()
   {
	  document.getElementById('CreateUserForm').style.visibility='visible';
	  document.getElementById('CreateUserForm').style.zIndex = 4;
	  document.getElementById('CreateUserForm').style.filter = 'alpha(opacity=100)';
	  document.getElementById('CreateUserForm').style.opacity = 1.0;
		document.getElementById('body').style.filter = 'alpha(opacity=20)';
		document.getElementById('body').style.opacity = 0.2;
		
		for (var i = 0; i < form1.elements.length; i ++)
		   form1.elements.item(i).disabled = true;
   }
   
   </script>

</head>
<body id="body">
   <form id="form1" runat="server">
   <table id="table">
	  <tr>
		 <td>
			Username:
		 </td>
		 <td>
			<asp:TextBox ID="txtUser" runat="server" />
		 </td>
	  </tr>
	  <tr>
		 <td>
			Password:
		 </td>
		 <td>
			<asp:TextBox ID="txtPassword" runat="server" />
		 </td>
	  </tr>
	  <tr>
		 <td>
			<asp:Button ID="btnLogin" runat="server" Text="Login" />
		 </td>
		 <td>
			<a href="java script:open_CUF();">Click here</a>
		 </td>
	  </tr>
   </table>
   <div class="CreateUserForm" id="CreateUserForm" onload="CUF_Load()">
	  <div class="CUFMenu" id="CUFMenu">
		 <a href="java script:close_CUF()">[X]</a>
	  </div>
	  <div id="content"></div>
   </div>
   </form>
</body>


If you wish to run this feel free to do so, There is no code behind for the button. Or if you wish to just run it as a local webpage remove all the "runat='server'"'s and change the <asp:TextBox ... />'s to HTML text boxes, and same with the <asp:Button .../> to HTML button.

Thanks for any help. Happy coding!

This post has been edited by s_kucksdorf: 24 January 2010 - 09:37 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Disable web link using j/s

#2 chirag.jain18  Icon User is offline

  • D.I.C Head

Reputation: 13
  • View blog
  • Posts: 68
  • Joined: 14-December 09

Re: Disable web link using j/s

Posted 24 January 2010 - 10:53 PM

link is not disabled because it is not part of elements array of form. So inside for loop, it is not getting disabled.You can put an alert box inside for loop and check.
Was This Post Helpful? 0
  • +
  • -

#3 s_kucksdorf  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 69
  • Joined: 12-May 09

Re: Disable web link using j/s

Posted 25 January 2010 - 07:57 AM

Alright, thanks for the response. Is there a way to make the rest of the page not clickable when the new div(form) appears? That's what I am really after here. So it would have behavior similar to a modal popup (for those who are familiar with AJAX) but without any postback to the server.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1