gpt4 book ai didi

javascript - 如何使用 fancybox 2 创建响应式弹出窗口?

转载 作者:行者123 更新时间:2023-11-29 14:51:37 26 4
gpt4 key购买 nike

我使用精美的 box2 创建了一个简单的弹出窗口。它在桌面网站上看起来不错。当我在手机上看到这个弹出窗口时,它全部延伸到手机上并且看起来很小。当我在移动设备上打开页面时,我需要显示它以适合移动设备显示。我怎样才能做到这一点?我想将任何其他插件与 fancy box 一起使用,还是可以通过 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>

最佳答案

<head>您的代码添加标签:

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

关于javascript - 如何使用 fancybox 2 创建响应式弹出窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24737994/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com