css背景图片，bootstrap和jquery-ui结合使用，dialog案例

时间：2023-11-25 22:35:26

css将一个不能铺满整个屏幕的图片铺满整个屏幕，将一下代码放到body中

<img src="data:image/login6.jpg" width="100%" height="100%" style="z-index:-100;position:absolute;left:0;top:0"/>

bootstrap和jquery-ui结合使用的dialog的小例子

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath }/css/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/css/jquery-ui-1.10.0.custom.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></script>
<style type="text/css">
.ui-draggable-handle{
background-color: red;
}
</style>
</head>
<body>
<h2 style="text-align: center;">工单处理</h2>
<table width="100%">
    <tr>
        <th>工单编号</th>
        <td></td>
        <th>工单级别</th>
        <td></td>
        <th>上报时间</th>
        <td></td>
        <th>处理人</th>
        <td></td>
    </tr>
</table>
    <input type="button" class="btn btn-primary btn-sm" value="误警关闭" onclick="p.falseClose();"></input>
    <input type="button" class="btn btn-primary btn-sm" value="重复关闭" onclick="p.repeatClose();"></input>
    <span id = "flag" style="color: red;font-weight: bold;"></span>

<div id="dialog-confirm" title="确认添加" style="display: none;">
            <table>
                <tr>
                    <td>工单编号</td>
                    <td><input id="serialNo" type="text" name="serialNo"/></td>
                </tr>
            </table>
</div>
<div id="dialog-confirm0" title="误警关闭提示" style="display: none;">
            <p style="text-align: center;font-weight: bold;font-size: 15px;color: red">确定要误警关闭吗？</p>
</div>
<table width="100%">
    <tr bgcolor="red"></tr>
</table>
<div class="demo-description">
</div>
</body>
<script type="text/javascript">
$(function() {

});

var p = {
    falseClose:function(){
        $( "#dialog-confirm0" ).dialog({
            resizable: false,
            height:,
            modal: true,
            buttons:{
                "确认":function(){
                    $( this ).dialog( "close" );
                    $.ajax({
                        type:"get",
                        url:"/>",
                        data:{},
                        dataType:"json",
                        success:function(d){
                            $("#flag").html(d);
                        }
                    });
                },
                "取消":function(){
                    $( this ).dialog( "close" );
                }
            }
        });

    },
    repeatClose:function(){　　　　 $("#serialNo").val("");
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:,
            modal: false,
            buttons: {
                "确认": function() {
                    $( this ).dialog( "close" );
                    $.ajax({
                        type:"get",
                        url:"/>",
                        data:{},
                        dataType:"json",
                        success:function(d){
                            alert(d);
                        }
                    });
                },
                "取消": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    }
}
</script>
</html>

相关文章