Register
> 博客>

jsp弹窗代码

新速特源码 1年前 43 0

以下是一个简单的JSP弹窗代码示例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP弹窗示例</title>
</head>
<body>
    <h1>欢迎来到JSP弹窗示例页面！</h1>
    <button onclick="showAlert()">点击弹出提示框</button>
    <script>
        function showAlert() {
            alert("这是一个提示框！");
        }
    </script>
</body>
</html>

在这个示例中，我们使用了一个简单的JavaScript函数来弹出一个提示框。当用户单击页面上的按钮时，该函数将被调用，并显示一个包含文本“这是一个提示框！”的提示框。

请注意，这只是一个简单的示例，您可以根据自己的需求进行修改和扩展。例如，您可以使用其他JavaScript库或框架来创建更复杂的弹窗，或者使用CSS样式来自定义弹窗的外观和行为。

以下是一个更完整的JSP弹窗代码示例，其中包含了使用Bootstrap框架创建模态框的示例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP弹窗示例</title>
<!-- 引入Bootstrap框架 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
    <h1>欢迎来到JSP弹窗示例页面！</h1>
    <!-- 使用Bootstrap创建一个模态框 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        点击弹出模态框
    </button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">这是一个模态框</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    这是模态框的内容。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入jQuery和Bootstrap的JavaScript文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中，我们使用了Bootstrap框架来创建一个模态框。当用户单击页面上的按钮时，模态框将被显示，并显示一个标题、内容和两个按钮。用户可以单击“关闭”按钮来关闭模态框，或单击“保存”按钮来执行其他操作。

请注意，为了使用Bootstrap框架，我们需要在页面中引入Bootstrap的CSS和JavaScript文件。在这个示例中，我们使用了CDN来引入这些文件，但您也可以将这些文件下载到本地并在页面中引用它们。

此外，我们还需要引入jQuery库，因为Bootstrap依赖于jQuery。在这个示例中，我们也使用了CDN来引入jQuery库。

腾讯云最新优惠活动，点击查看

Related

热门文章

微海报