There are only follow the three steps. it will getting a easy to set the popup background transparent. I tried to do this its good.
Just copy and paste save the html file. put the code the warm server then only jquery file will work then it will open the popup. besides to use what you need.
Step:2
Step:3
Read more ...
<style>
.blockbkg {
background-color: black;
opacity: 90%;
filter:alpha(opacity=90);
background-color: rgba(0,0,0,0.90);
width: 100%;
min-height: 100%;
overflow: hidden;
float: absolute;
position: fixed;
top: 0;
left: 0;
color: white;
}
.cont {
background-color: white;
color: black;
font-size: 16px;
border: 1px solid gray;
padding: 20px;
display:block;
position: absolute;
top: 10%;
left: 35%;
width: 400px;
height: 400px;
overflow-y: scroll;
}
.closebtn {
width: 20px;
height: 20px;
padding: 5px;
margin: 2px;
float: right;
top: 0;
background-image: url(x.png);
background-repeat: no-repeat;
background-position:center;
background-color: lightgray;
display: block;
}
.closebtn:hover {
cursor: pointer;
}
.normal {
background-color: lightblue;
width: 900px;
min-height: 200px;
padding: 20px;
}
</style>
Step:2
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script> <script> $(document).ready(function () { $("#closebtn").click(function () { $("#dlg").hide('800', "swing", function () { $("#bkg").fadeOut("500"); }); }); $("#opn").click(function () { if (document.getElementById('bkg').style.visibility == 'hidden') { document.getElementById('bkg').style.visibility = ''; $("#bkg").hide(); } if (document.getElementById('dlg').style.visibility == 'hidden') { document.getElementById('dlg').style.visibility = ''; $("#dlg").hide(); } $("#bkg").fadeIn(500, "linear", function () { $("#dlg").show(800, "swing"); }); }); }); </script>
Step:3
<body>
<div class="normal">
<h1>Modal Dialogs</h1>
<p>
This is an example of how to create <strong>modal dialog popup windows</strong> for
your pages using javascript and CSS. Modal dialog popups are better than window-based
popups, because a new browser window is not required and the user does not have to leave
the page. This is great for when you need an easy way for the user to carry out a specific
action on the same page and control the modality of the window.
</p>
<p><a href="#" id="opn">Click here</a> to display the javascript modal popup dialog!</p>
</div>
<div class="blockbkg" id="bkg" style="visibility: hidden;">
<div class="cont" id="dlg" style="visibility: hidden;">
<div class="closebtn" title="Close" id="closebtn"></div>
<h1>Hello World!</h1>
<p>
This is a neat little trick to get a modal popup dialog box in your web pages
without disturbing the user experience or dsitracting them with popup windows or
new tabs...
</p>
<p>
The <strong>popup dialog</strong> uses javascript (jQuery) and CSS to create a modal dialog that
will retain focus over the parent window until it is closed. The trick is simple.
We use block-elements (divs) to create the dialog window. The CSS rules for <em>position</em>,
<em>float</em>, <em>top</em>, <em>left</em>/<em>right</em>, and <em>opacity</em> (or CSS3
transparency) allows us to create a semi-transparent div over the entire page, thereby creating
the illusion of modalness. The other div then takes focus over the center of the window.
</p>
<img src="https://sheriframadan.com/examples/uploadit/uploads/50f00e1434e8b.jpg" width="200" height="252">
<p>
We can also retain content view control over the modal dialog with the <em>overflow</em> CSS property.
This means no matter what we place inside of our dialog window the content will remain inside
of the defined bounds even if scrolling becomes necessary within the div.
</p>
</div>
</div>
</body>
<html>
