Skip to main content

Javascript Popup with background blocked

By
Created a simple .aspx page to show Javascript Popup, which will block the background.

To implment this, we need to create.
  1. Css - style for DIV
  2. JavaScript - to support this functionality
  3. DIV tage in .aspx page - used to show/hide on click
  4. Button - to get Event

Following is the simple sample code that, You can use for this fucntionality.

<html>
<
head>
<script type="text/javascript">function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)cvr.style.display =
"block"dlg.style.display = "block"if (document.body.style.overflow = "hidden") {cvr.style.width =
"1024"cvr.style.height = "100%"}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)cvr.style.display =
"none"dlg.style.display = "none"document.body.style.overflowY = "scroll"}
</script>

<style type="text/css">#cover {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;
filter: alpha(Opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5}
#dialog {
display: none;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
position: absolute;
z-index: 100;
background: white;
padding: 2px;
font: 10pt tahoma;
border: 1px solid gray}
</style>
</
head><
body><
form runat="server"><
div id="cover"></div><
div id="dialog">Popup DIV<br/><input type="text"/><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br/><input type="button" value="Submit"/><br/><a href="#" onclick="closePopUp('dialog');">[Close]</a></
div><
a href="#" onclick="showPopUp('dialog');">Show</a></
form></
body></
html>
Labels:

Comments

  1. Charli james20 January 2022 at 08:24

    Your work is very good and I appreciate you and hopping for some more informative posts. Thank you for sharing great information to us. background remover

    ReplyDelete

Post a Comment

Popular posts from this blog

WCF MaxReceivedMessageSize max value in .config

By
MaxReceivedMessageSize parameter in binding config   file:   For max file size in WCF, we need to set following parameter in binding files. <binding name="MyService"        maxReceivedMessageSize="2147483647"        maxBufferSize="2147483647" transferMode="Streamed" >        <readerQuotas maxDepth="2147483647" maxStringContentLength="2147483647"      maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647"/> <!-- other binding info here, such as security --> </binding> Max possible size: MaxReceivedMessageSize to 2147483647 (i.e. Int32.MaxValue), which is 2GB For our case, as we are using WsHttpBinding. <wsHttpBinding>         <binding name="wsHttpBindingSettings" maxReceivedMessageSize="2147483647">           <readerQuotas maxDepth="2147483647" maxStringContentLength
Post a Comment
Read more

biztalk schema remove ns0 prefix

By
We can remove ns0 prefix simply by set the schema elements property or both elements and attributes properties to be qualified. To do that follow my steps: 1-       Open your schema 2-       Right Click <Schema> and select properties 3-       Use schema property editior and Set [Element FromDefult] to Unqualified , and then set [Attribute FromDefault] to Unqualified if you are using attributes in your schema. After applying the steps above, both XML instances below will be valid: Instance 1 (with ns0) < ns0:Root xmlns:ns0 = " http://RandomBizTalkProject.Schema1 " >   < Field1 > Field1_0 </ Field1 >   < Field2 > Field2_0 </ Field2 > </ ns0:Root > Instance 2 (without ns0) < Root xmlns = " http://RandomBizTalkProject.Schema1 " >   < Field1 > Field1_0 </ Field1 >   < Field2 > Field2_0 </ Field2 > </ Root >
Post a Comment
Read more

Object Oriented Programming Concepts

By
OOP Basics Visual Basic was Object-Based, Visual Basic .NET is Object-Oriented , which means that it's a true Object-Oriented Programming Language . Visual Basic .NET supports all the key OOP features like Polymorphism , Inheritance , Abstraction and Encapsulation. It's worth having a brief overview of OOP before starting OOP with VB. Why Object Oriented approach? A major factor in the invention of Object-Oriented approach is to remove some of the flaws encountered with the procedural approach. In OOP, data is treated as a critical element and does not allow it to flow freely. It bounds data closely to the functions that operate on it and protects it from accidental modification from outside functions. OOP allows decomposition of a problem into a number of entities called objects and then builds data and functions around these objects. A major advantage of OOP is code reusability. Some important features of Object Oriented programming are as follows: Emphasis on
5 comments
Read more