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

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

<img src="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:165,

            modal: true,

            buttons:{

                "确认":function(){

                    $( this ).dialog( "close" );

                    $.ajax({

                        type:"get",

                        url:"<c:url value="/dialog?flag=1"/>",

                        data:{},

                        dataType:"json",

                        success:function(d){

                            $("#flag").html(d);

                        }

                    });

                },

                "取消":function(){

                    $( this ).dialog( "close" );

                }

            }

        });

        

    },

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

 

你可能感兴趣的:(bootstrap)