Question

我使用花式box2创建了一个简单的弹出窗口。它在桌面网站上看起来很不错。当我看到它在手机上弹出时，它全都伸向手机，看起来很小。当我在移动设备上打开页面时，我需要将其显示在移动显示屏上。我怎样才能做到这一点？我想将任何其他插件与精美的盒子一起使用，还是可以通过JS / CSS来实现？请提出建议...... 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>

Answer 1

在代码的<head>标记下添加：

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

如何使用fancybox 2创建响应式弹出窗口？

1 个答案: