How to create a responsive popup using fancybox 2?


Tags: javascript,jquery,css,mobile,fancybox-2

Problem :

I've created a simple popup using fancy box2. It's looking good on desktop site. When I see this pop up on a mobile it's all stretch to the mobile and looks tiny. I need to show this to fit into the mobile display when I open the page on mobile. How can I do that? Do I want to use any other plugin together with fancy box or can I do that by JS/ CSS? Please do suggestions.... demo

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />

    <script type="text/javascript">
        $("document").ready(function(){
            $("a.button").fancybox();
        });
    </script>

    <style>
        #popup { display: none; width: 100%;}
    </style>
</head>

<body>
    <div class="login_popup">
        <a class="button" href="#popup" >Login</a>
            <div id="popup">
                <a href="#" class="close">CLOSE</a>
                <form>
                    <P><span class="title">Username</span> <input name="" type="text" /></P>
                    <P><span class="title">Password</span> <input name="" type="password" /></P>
                    <P><input name="" type="button" value="Login" /></P>
                </form>
            </div>
    </div>
</body>
</html> 


Solution :

Under <head> tag of your code add:

<meta name="viewport" content="width=device-width, user-scalable=no">

    CSS Howto..

    Show hint over a CSS background image on mouse over

    how to position/resize image after rotation using css/js so that the image is not positioned outside the div holding it or cropped out

    How to create a full screen div on landing page

    How to change text color (and background) on nav bar links when hovering? [duplicate]

    how to make moving spinner's edges rounded css

    How can I make my jquery mobile collapsible set larger using css

    How to draw heart using HTML/CSS table?

    How to create equal height columns in pure CSS [duplicate]

    How to center SVG within its container?

    How to set control properties in css?

    How to style object when the user clicks it

    Show all text document

    using the unorthodox `head {display: block}` to show text to user?

    how to change the background colour of entire body except a sidebar div

    how is the search mail button implemented?

    How to get a label under an underlined word in css? [closed]

    How to stop user agent stylesheets from overriding my css

    how to add style to form under echo statement by css [closed]

    how to put css in selected row in angular js?

    how to always display empty tags, is there a css property for this?

    How can I select the first paragraph in this code?

    How to animate an icon for with CSS?

    How to make hover buttons?

    How to place an HTML element over another using CSS

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    jQuery Slideshow in Chrome, Firefox, and Safari

    How to count the number of correct answers using Javascript?

    How to Prevent My CSS From Clashing With Facebook's CSS?

    How to Include marker in SVG Blinking Rectangular or circle Border image in google maps

    How to inherit from ancestor and not parent in CSS?