Rectangle 27 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
    // Getting the variable's value from a link 
var loginBox = $('.login-window').attr('href');

//Fade in the Popup and add close button
$(loginBox).fadeIn(300);

//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;

$(loginBox).css({
    'margin-top': -popMargTop,
        'margin-left': -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);



// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').on('click', function () {
    $('#mask , .login-popup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});
</script>
<style>
a {
    text-decoration:none;
    color:#00c6ff;
}
h1 {
    font: 4em normal Arial, Helvetica, sans-serif;
    padding: 20px;
    margin: 0;
    text-align:center;
}
h2 {
    color:#bbb;
    font-size:3em;
    text-align:center;
    text-shadow:0 1px 3px #161616;
}
#mask {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}
.login-popup {
    display:none;
    background: #fff;
    padding: 10px;
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999;
    -moz-box-shadow: 0px 0px 20px #999;
    /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999;
    /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px;
    /* Firefox */
    -webkit-border-radius: 3px;
    /* Safari, Chrome */
}
img.btn_close {
    float: right;
    margin: -28px -28px 0 0;
}
</style>
</head>
<body>
<div class="btn-sign">
     <h2><a href="#login-box" class="login-window">Click me to Open the dialog box</a></h2>

</div>
<div id="login-box" class="login-popup"> <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>

     <h1>This is a dialog box !</h1> 
    <p>How to load it on page load event?</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</body>
</html>

html5 - How to open jquery dialog box on page onload event - Stack Ove...

jquery html5 modal-dialog
Rectangle 27 0

Don't use the # tag in your links!

It will try to to scroll to the anchor # but because it's empty it will scroll to the top of the page.

Absolutely do use the hash tag and do not in any case use inline JavaScript. To prevent the browser from redirecting to #, you can use return false; at the end of the handler function. crisp.tweakblogs.net/blog/313/

Sorry, Rogier, that did not solve the issue. It also makes it so the page reloads which closes the popup. Thanks though!

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a>

Whatever is in the href is immaterial as the 'return false' prevents the browser from going to that address. Keep in mind that you are wasting bandwidth by putting in anything but the bare minimum -- some low traffic sites don't care about such things, obviously.

jquery - Prevent Background Scrolling When Displaying Popup - Stack Ov...

jquery html popup
Rectangle 27 0

this will work for scroll option but $("body").css("overflow", "hidden"); piece of code will cause popup form display issue(form will not display properly Eg: if form is large then half part will display at that time scroll option was disabled)

do one thing smartly. Enable the scroll option for the container that containes the form like $("#idofformcontainer").css( "overflow", "auto");

jquery - After loading a popup form background scroll should get hide ...

jquery popup ruby-on-rails-3.2 scroll
Rectangle 27 0

<html>
<head>
<style>
.popup{
   z-index: 999;
  display: none;
}
.overlay{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.90);
  position: absolute;
  top: 0;
  left: 0;
}
.box{
  width: 250px;
  height: 100px;
  background: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box span{
  float: right;
  margin: 10px;
  cursor: pointer;
}

</style>
  </head>
  
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
  "use strict";

  $("button").click(function () {
    $(".popup").fadeIn();
  });

  $("span").click(function () {
    $(".popup").fadeOut()
  });


});
  
</script>
  

<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
  <div class="overlay"> sheko </div>
  <div class="box">
      <span>X</span>
  <div>
</div>

</body>





</html>

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - java script code notworking - Stack Overflow

javascript html css
Rectangle 27 0

There were two errors. You have used "Show popup" inside "mask" div that was displayed none. Second for close icon you have given "z-index:2", this should be greater than mask z-index to show in on top of mask

<pre>
    $(document).ready(function() {  
        $('.minibtn').click(function() {  
        // Show pop-up and disable background using #mask  
        $("#pop").fadeIn('slow');  
        $("#mask").fadeIn('slow');  
        // Load content.  
        $.post("contentPopup.html", function(data) {  
            $("#contentPop").html(data);  
        });  
        });  

        // Hide pop-up and mask
        $("#mask").hide();
        $("#pop").hide();


        // Size pop-up
        var img_w = 600;
        var img_h = 300;

        // width and height in css.
        $("#pop").css('width', img_w + 'px');
        $("#pop").css('height', img_h + 'px');

        // Get values ??from the browser window
        var w = $(this).width();
        var h = $(this).height();

        // Centers the popup  
        w = (w / 2) - (img_w / 2);
        h = (h / 2) - (img_h / 2);
        $("#pop").css("left", w + "px");
        $("#pop").css("top", h + "px");

        // Function to close the pop-up
        $("#close").click(function() {
            $("#pop").fadeOut('slow');
            $("#mask").fadeOut('slow');
        });
    });
</pre>

You are so right! The z-index parameter was wrong and the position of the 'mask' div was also wrong. now, it is working perfectly fine :) Thanks!

Of course! Sorry I haven't done it before :P By the way, this is how my jsp looks like now: <div id="pop"> <div id="close">X</div> <div id="contentPop"></div> </div> <div id="mask"></div> <div id="page-wrap"> ... <a class="minibtn" onclick="show();">Show pop-up</a> ... </div>

jquery - Disable background when div popup - Stack Overflow

jquery css background popup
Rectangle 27 0

have you tried to use display:none in your css instead of using the function hide() in jQuery, then after the $('#showBtn').click use your function show() and inside this function just go to your popup css and change the display to block and deactivate the backround.

Thank you very much for your help. I tried to do what you said and it worked with the popup but it didn't work with the mask because the positin of this div was wrong. That was the problem. @Vinita for found it :)

you are the most welcome dude

jquery - Disable background when div popup - Stack Overflow

jquery css background popup
Rectangle 27 0

.body {
    -webkit-filter: blur(10px);     
    filter: blur(10px);  
}

Now you just need jQuery to toggle the blur when the pop-up is shown.

html - Creating a css and jquery fade/blur background when popup is vi...

jquery html css popup fade
Rectangle 27 0

hide the scrollbar of body when opening the popup

and revert back when closing the popup

document.body.style.overflow = "visible";

Assigning overflow hidden will cause the scroll bar to disappear, thus changing the page width. This does not disable the scroll bar, though it does prevent scrolling from occurring.

jquery - Prevent Background Scrolling When Displaying Popup - Stack Ov...

jquery html popup
Rectangle 27 0

When you activate your popup, set body { overflow: hidden; } in your CSS. This will cause the page to freeze, and not allow the user to scroll. Remember to reactivate it when you close your popup though!

Didn't work, that cause all the page to freeze including the popup, and i want scroll inside.

body { overflow: hidden; } only affects the body, it will leave the popup unchanged. Can you please reproduce this problem for me?

I managed to do in this way.. When the popup is open I set via JQuery position: fixed to the div of the the page and I remove after the popup is closed. Thanks for your help!

jquery - Popup without background scroll on JqueryMobile - Stack Overf...

jquery html5 css3 jquery-mobile mobile
Rectangle 27 0

I had the same issue as yours, I suppose that you are calling your popup with ajax, if yes then

function ajaxFunction(gotid){
$('body').css("overflow","hidden");  // <----- like this 
$.ajax({
.... the rest of your code
function closeme(){
$('body').css("overflow","scroll");  // <----- will set it back to scrollable

jquery - Popup without background scroll on JqueryMobile - Stack Overf...

jquery html5 css3 jquery-mobile mobile
Rectangle 27 0

Create a jquery popup div in on click trigger event, that pop up displays with opacity background and it will remains center the popup if you scrolling zoom out the browser and closing it fadeout, and also you can customize the content of the popup div for your cool website designs.

javascript - window.open() in new tab are not subject to pop-up blocke...

javascript asp.net
Rectangle 27 0

There is a lot of code posted in the question (and even more in the demo) that doesn't seem to have anything to do with the question being asked. This is more or less all you need for a simple overlay;

.overlay {
    position:fixed;
    display:none; 

    /* color with alpha channel */
    background-color: rgba(0, 0, 0, 0.7); /* 0.7 = 70% opacity */

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Make sure this is a child (direct descendant) of <body>, or that there are no positioned ancestors. (The term "positioned" refers to an element with a position value other than static)

<div class="overlay"></div>
<body>
// rather than "body", you will want to tweak this selector
$("body").click(function() {
    $(".overlay").toggle(); // show/hide the overlay
});

Here's a demo including a popup with the overlay: http://jsfiddle.net/5aWhE/19/

how do I do it if I have access only to JS on the website? I am a third party service provider to a website and I have access only to JS. Can I do something like, temp = $('body').html() temp = '<div id="overlay">' + temp + '<div>' $('body').html(temp) and then inserting the CSS to head of the page using jquery append but this doesnt seem to work.

@lemarc $('body').html(anything) sounds like a horrible idea, as it would overwrite the entire page... you probably want something like $(document.body).prepend(yourHtml) instead. It's also entirely possible to insert css <link>s in the <head> dynamically using .append() although not needed as you can attach styles directly to the element using .css(). If you can't get it working, try posting a new question about it.

I figured out the method, I just appended the div to the body and modified the css using jquery. By the way you should consider using window.body.scrollHeight for height of the overlay or else it will only appear for the visible part of the window.

@lemarc yes, that's a good idea. you could also use position: fixed; instead of absolute.

html - Creating a css and jquery fade/blur background when popup is vi...

jquery html css popup fade
Rectangle 27 0

There is always more than one way to do things. I would set the div you intend to pop-up as a dialogue and simply open it when needed. That will automatically overlay the rest of the page and prevent user entry. Here's and example:

<script type="text/javascript">
    $(document).ready(function () {
        $("#divDialog").dialog(
            {
                modal: true,
                autoOpen: false,
                width: 700,
                buttons: { Cancel: function () { $(this).dialog("close"); } }
            }

        );
    });
</script>

<div id="divDialog" title="Data Modification">
  //elements to enter or modify data
</div>

and then on the click process:

$('#divDialog').dialog('open');

jquery - disable background when popup opens - Stack Overflow

jquery blur
Rectangle 27 0

One option is to temporarily set the overflow property to hidden on body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.

The other choice is to tap onto the $(window).scroll() event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:

$(window).unbind('scroll');

Thank you. But would this solution cause screen flickering? Also, the pageTracker is passed through a custom field set up in Wordpress, and would not be easy to interface with jQuery.

doesn't work in safari 4 and firefox 3.5.7.

I have the same situation. This is a nice solution, as it does lock the scroll in FF24.0, but it still allows the page to move using end/home/pageup/pagedown; also, it does not appear to work in IE8. I haven't tested it further than those two browsers, but the above comment seems to show that this question needs some work.

jquery - Prevent Background Scrolling When Displaying Popup - Stack Ov...

jquery html popup
Rectangle 27 0

do you have a popup message box ?! my suggest is Magnific Popup jQuery Plugin in another way you wanna write your code for this popup message form just write a div with display [style] none and in your js set display inherit But remember Position Mostly is Absolute and have black with opacity 0.6 background for fill your webdesign.

website - How to get user input in javascript - Stack Overflow

javascript website user-input
Rectangle 27 0

.popup-cart-container {
display: none;
left: 0;
position: absolute;
top: 0;
z-index: 1000;
}

fadein - jQuery popup with faded background conflicts with transparent...

jquery fadein fade fadeout