对话框

最新推荐文章于 2024-07-23 16:37:55 发布

pengchong333

最新推荐文章于 2024-07-23 16:37:55 发布

阅读量341

点赞数

分类专栏： javascript 文章标签： javascript 对话框 JQuery UI

本文链接：https://blog.csdn.net/pengchong333/article/details/51784231

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先沾出两个效果图：

这里使用的是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>
					 <a
				href="<%=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" οnclick="getBuildingId(${building.id})" ></input></td></span>
			</tr>

		</c:forEach>
	</tbody>

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

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