对话框

来源：互联网发布：网络电视怎么安装编辑：程序博客网时间：2024/05/18 22:09

先沾出两个效果图：

这里使用的是JQuery UI dialog

上图中，其实实现方式稍有不同，图二中不能再使用 id来标识，而是使用了class

图一对应的部分代码：

$(function() {    // 初始化    $("#btn").click(function() {        // alert("btn 被点击啦！");        $("#dialog-confirm").dialog("open");    })   ;    // 初始化对话框    $("#dialog-confirm").dialog(        {            modal: true,             // 创建模式对话框            autoOpen: false,            //buttons:   Type: Object or Array            buttons: {                "确认": function() {                   $(this).dialog('close');                  document.getElementById('form1').action = "addcontractproject0.htm?";                    document.getElementById("form1").submit();                      },                "修改": function() { $(this).dialog('close'); return false; },                "确认并录入其它项目": function() {                  $(this).dialog('close');                     document.getElementById('form1').action = "addcontractproject1.htm";                       document.getElementById("form1").submit();                },            },    //     position:'center' ,         show: {           effect: "blind",           duration: 1000          },          hide: {           effect: "explode",           duration: 1000          },            resizable:true,            width:400,            }    );});

    <!-- 弹出的对话框 -->    <div id="dialog-confirm" title="项目创建确认" style="display: none">     <p>        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>                                     确认所填项目信息无误请点击确认<br>                                         如需修改请点击修改</p>   </div>

 <tr><th >操作</th>            <td ><input type="button" value="保  存"  id="btn"></input></td> </tr>

图二对应的代码：

<script type="text/javascript">   <span style="background-color: rgb(51, 255, 51);"> var id="";</span>        //该函数用来设置 所选 检测物的id, 方便确定对话框的操作对象  function getBuildingId(x){        id=x;        //alert(id);        }         $(function() {    // 初始化    $(".reportsubmit").click(function() {        // alert("btn 被点击啦！");        $("#dialog-confirm").dialog("open");    }) ;      // 初始化对话框    $("#dialog-confirm").dialog(        {            modal: true,             // 创建模式对话框            autoOpen: false,            //buttons:   Type: Object or Array            buttons: {                "整改": function() {                   $(this).dialog('close');                   //注意：这个地方是一个超链接   不是提交保单                   window.location.href="<%=request.getContextPath()%>/submitbuildingrepord.htm?buildingid="+id+"&time=1";                    },                "无需整改": function() {                  $(this).dialog('close');                 window.location.href="<%=request.getContextPath()%>/submitbuildingrepord.htm?buildingid="+id+"&time=2";                },            },    //     position:'center' ,         show: {           effect: "blind",           duration: 1000          },          hide: {           effect: "explode",           duration: 1000          },            resizable:true,            width:300,            }    );});</script>

  <!-- 弹出的对话框 -->    <div id="dialog-confirm" title="报告是否需要整改" style="display: none">     <p>        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>                         请确认报告是否需要整改</p>   </div>

<tbody><span style="background-color: rgb(51, 255, 51);"><c:forEach</span> items="${buildinglist}" var="building"><tr align="center"><td>${building.buildingName}</td><td>${building.buildingClassify}</td><td>${building.buildingcontactPerson}</td><td>${building.buildingofficePhone}</td><td align="center"><a     href="<%=request.getContextPath()%>/downloadreporttemplate.htm?id=${building.id }">报告模板下载</a></td><td> <ahref="<%=request.getContextPath()%>/uploadreportfile.htm?buildingId=${building.id}">上传报告</a></td><!--                           注意这个地方使用的是 class 不能使用id, id有唯一性约束 --><span style="background-color: rgb(51, 255, 51);"><td align="center" ><input type="button" value="报告提交"  class="reportsubmit" onclick="getBuildingId(${building.id})" ></input></td></span></tr></c:forEach></tbody>

图二说明：调出对话框之前，先通过getBuildingId()函数，将 building.id赋值给全局变量。

参考文献： http://www.cnblogs.com/haogj/archive/2011/02/16/1956523.html

0 0