标题:如何实现点击登录按钮便弹出一个不大的小框实现登录??
只看楼主
lyc578094
Rank: 1
等 级:新手上路
帖 子:16
专家分:0
注 册:2011-5-6
结帖率:100%
 问题点数:0 回复次数:5 
如何实现点击登录按钮便弹出一个不大的小框实现登录??
本人初学JSP,想实现一个登录界面,就是当你点击登录时会弹出类似对话框的东西,让你进行登录。。。。就像有时候QQ空间登录那样。。。。求高人指点啊!!!!还有一个问题就是如何实现本页定向刷新,比如博客里面,你点查看所有博文,但是感觉还是在本页,上面下边都没动,就是正文发生了变化。。。。

[ 本帖最后由 lyc578094 于 2011-5-15 00:50 编辑 ]
搜索更多相关主题的帖子: QQ空间登录 对话框 博客 正文 定向 
2011-05-15 00:37
柏新星
Rank: 2
等 级:论坛游民
帖 子:13
专家分:99
注 册:2011-5-16
得分:0 
javascrip
alert 方法 简单的很 上百度查下 或是 问我
2011-05-16 21:28
静静呀
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2018-1-11
得分:0 
如何实现点击登录按钮便弹出一个不大的小框实现登录??
2018-01-11 19:35
疯狂的小a
Rank: 10Rank: 10Rank: 10
等 级:贵宾
威 望:39
帖 子:423
专家分:1871
注 册:2018-2-6
得分:0 
回复 3楼 静静呀
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="/projectname/css/bootstrap.min.css">
<script type="text/javascript" src="/projectname/js/jquery-1.11.3.js"></script>
<script src="/projectname/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#login").bind("click", function() {
        $('#myModal').modal('show');
        $("#loginForm").get(0).reset();
        $("#loginButton").unbind("click");
        $("#loginButton").bind("click", function() {
            $('#myModal').modal('hide');
            var json = $("#loginForm").serialize();
            $.post("/projectname/login", json, function(data) {
                if (data.type == 1) {
                    locatin.href="/projectname/success.html";
                } else if (data.type == -1) {
                    alert(data.message);
                }
            }, "json")
        })
    });
})
</script>
</head>
<body>
<a href="javascript:void(0)" id="login">登录</a>
</body>

<!-- 添加商品,模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户登录</h4>
            </div>
            <div class="modal-body">
                <form id="loginForm">
                <table>
               
                    <tr>
                        <td>用户名:</td>
                        <td><input type="text" name="username" placeholder="请输入用户名"></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" name="password" placeholder="请输入密码"></td>
                    </tr>
                </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="loginButton">提交</button>
            </div>
        </div>
    </div>
</div>
</html>

假如人生没有梦想,和咸鱼有什么区别!
2018-03-01 23:16
疯狂的小a
Rank: 10Rank: 10Rank: 10
等 级:贵宾
威 望:39
帖 子:423
专家分:1871
注 册:2018-2-6
得分:0 
回复 3楼 静静呀
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="/projectname/css/bootstrap.min.css">
<script type="text/javascript" src="/projectname/js/jquery-1.11.3.js"></script>
<script src="/projectname/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#login").bind("click", function() {
        $('#myModal').modal('show');
        $("#loginForm").get(0).reset();
        $("#loginButton").unbind("click");
        $("#loginButton").bind("click", function() {
            $('#myModal').modal('hide');
            var json = $("#loginForm").serialize();
            $.post("/projectname/login", json, function(data) {
                if (data.type == 1) {
                    locatin.href="/projectname/success.html";
                } else if (data.type == -1) {
                    alert(data.message);
                }
            }, "json")
        })
    });
})
</script>
</head>
<body>
<a href="javascript:void(0)" id="login">登录</a>
</body>

<!-- 登陆,模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户登录</h4>
            </div>
            <div class="modal-body">
                <form id="loginForm">
                <table>
               
                    <tr>
                        <td>用户名:</td>
                        <td><input type="text" name="username" placeholder="请输入用户名"></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" name="password" placeholder="请输入密码"></td>
                    </tr>
                </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="loginButton">提交</button>
            </div>
        </div>
    </div>
</div>
</html>

[此贴子已经被作者于2018-3-1 23:19编辑过]


假如人生没有梦想,和咸鱼有什么区别!
2018-03-01 23:17
疯狂的小a
Rank: 10Rank: 10Rank: 10
等 级:贵宾
威 望:39
帖 子:423
专家分:1871
注 册:2018-2-6
得分:0 
为什么这个帖子总是显示在java基础里边,明明都已经回答了

假如人生没有梦想,和咸鱼有什么区别!
2018-03-01 23:35



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-339907-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.825588 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved