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.

<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>

0 comments

Related Posts Plugin for WordPress, Blogger...