用jquery-ui的dialog做对话框

js文件:

<script src="plugins/jqueryui/jqueryui/jquery-1.9.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="plugins/jqueryui/themes/base/jquery.ui.all.css"/>
<script src="plugins/jqueryui/jqueryui/jquery-ui.js" type="text/javascript"></script>

// 遮罩层特效js

<link href="plugins/showLoading/showLoading.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="plugins/showLoading/jquery.showLoading.min.js"></script>  

div层:

<div style="display: none;" id="addPotential" title="套餐导入">
            <form action=""  id="potentialForm" method="post">
               <div class="Arightbor">
                    <div class="Acontent">
                         <table width="100%" align="center" cellpadding="5" cellspacing="0" style="margin-top:15px;font-size: 12px" id="showcontact">
                               <tr>
                                <td width="100" height="30" align="right" >复制4s店:</td>
                                <td id="show4Shop"></td>
                              </tr>
                              <tr>
                                <td width="100" height="30" align="right" >导入4s店:</td>
                                <td >
                                    <select id="insertSelect" name="insertsid" style="height:25px" onchange="">
                                    <option value="0">--请选择--</option>
                                        </select>
                                          <div id="datedivTwo"></div>
                               </td>
                              </tr>
                            </table>
                    </div>
                   </div>
             </form>
     </div>

js:

$(function(){
        $("#importmaintenance").click(function(){
            //执行相关的业务逻辑信息
            $("#show4Shop").html($("#oldshop").html());
            $.ajax({
                     type:"POST",
                    url:"<%=basePath%>shopMaintenanceAction_InsertCarMaintenanceList",
                    dateType:"text/html",
                    success:function(result){
                     var msg=eval("("+result+")");
                        $.each(msg,function(index,item){
                            $("#insertSelect").append("<option value=‘"+item[0]+"‘>"+item[1]+"</option>");
                        });
                        var insertSelect=$("#insertSelect").val();
                        $("#insertSelect").combobox({
                             onChange:function(insertSelect){
                                 if(!isNaN(insertSelect)){
                                 if(insertSelect!=0 && insertSelect!=""){
                                   $("#insertSelect").find("option[‘"+insertSelect+"‘]").attr("selected",true);
                                 }
                                 }

                             }
                        });
                    }
            });

            $("#addPotential").dialog({
                 resizable: false,
                 height:300,
                 width:350,
                 modal: true,
                   buttons:{
                    "确定": function(){
                     $("#datedivTwo").html("");
                      var insertSelect=$("#insertSelect").val();
                      if(insertSelect==0){
                          $("#datedivTwo").html("<font color=‘red‘>请选择导入4s店!</font>");
                           return ;
                      }
                          //执行相关的业务逻辑信息
                        $("#addPotential").showLoading();
                          $.ajax({
                                 type:"POST",
                                url:"<%=basePath%>shopMaintenanceAction_copyCarMaintenanceList",
                                dateType:"text/html",
                                data:$("#potentialForm").serialize(),
                                success:function(result){
                                    if(result == "1"){
                                        $("#addPotential").hideLoading();  //遮罩层特效
                                        alert("导入成功");
                                        window.location.href="shopMaintenanceAction_getCarMaintenanceList";
                                    }else{
                                        $("#addPotential").hideLoading();
                                        alert("导入失败 ");
                                    }
                                }
                        });
                     }
                    ,
                     "取消": function(){
                         $(this).dialog("close");
                     }
                 }
            });
        });
  });
时间: 2024-10-13 15:36:00

用jquery-ui的dialog做对话框的相关文章

iframe中的jquery ui modal dialog 覆盖父窗口参考

function openDialog(){ var $doc; if(window.location!=window.parent.location){ // <SPAN style="COLOR: #ff0000">页面在iframe中</SPAN> $doc=window.parent.jQuery.noConflict(); }else{ // <SPAN style="COLOR: #ff0000">页面单独打开<

jquery ui中的dialog,官网上经典的例子

jquery ui中的dialog,官网上经典的例子 jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这个控件. 1.实例 官网源代码中给出了一些实例,首先看看实例是什么样子的. a.默认功能 也是最简单的应用,也就是打开一个对话框,代码如下 <!doctype html> <html lang="en"> <head> <meta charset=&q

jquery ui中的dialog

jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这个控件. 1.实例 官网源代码中给出了一些实例,首先看看实例是什么样子的. a.默认功能 也是最简单的应用,也就是打开一个对话框,代码如下 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <tit

基于Jquery UI Dialog 的改写

我最近在做的这个项目是纯粹的js+html5文件,java肯定有涉及,不过现在基本上在使用js和html5的特性. 项目要使用一种类似于dialog的功能,让一部分页面能够弹出来,并且可以移动,当然使用dialog是很不错的选择 但是在真正使用的时候发现,jquery UI的dialog虽然能满足基本的要求但是,有些功能是不能满足,如果自己写这个dialog,显然不太合适,因为jquery只有一点不能满足需求,是要在dialog的右上角多加几个按钮,单纯的一个关闭按钮不能满足需求.因为jquer

解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如下: 使用Select2,主要是因为它支持下拉式搜索.所以在数据稍微多一点,作为搜索选择功能的首选.但是运行出来之后,发现搜索框无法点击.开始想到的index不够大,被其他的元素覆盖了.但是跳转z-index也无法解决.在普通的页面,搜索框是ok的. 2.解决办法 通过Google搜索,发现sele

二:nodejs+express+redis+bootstrap table+jquery UI

介绍:做一个量化投资的实时系统. 综合: 添加记录,顺序改变的话,refresh之后,能正常刷新吗?可以正常刷新,只是顺序又变回去. express中用fs readfile 时,需要用path.join来写路径,如果用路由的话,会读出来数字.json的读取和存储,JSON.parse(data);会变为一个json对象: JSON.stringify(data);把json变为字符串,如果这时候写入.json中,则不会有合适 的缩进.所以需要JSON.stringify(data, funct

jQuery UI 对话框(Dialog) - 模态表单

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框(Dialog) - 模态表单</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquer

API分析——Jquery UI Dialog

1.阅读API文档的一般方法? 通常地, API由三部分构成:属性.方法.事件. 属性表示参数配置,作为一个组件的微调,或者功能的开启与关闭: 方法表示组件能够发生的动作,或者组件的状态监测: 事件表示触发,即提供一个观测点,当触碰到观测点时,将产生通知或函数回调: 这三类几乎覆盖了可能的用户动作.数据传递. 2.如何看Jquery UI Dialog的API? 2.1了解对话框的构成 要掌握一个东西,就必须先了解他,就像吃饭睡觉那么自然,才能更好地掌握. 对于对话框,我们也要做同样的了解. 我

jQuery UI 1.11 Dialog 垂直居顶,水平居中(头部居中)

jQuery Version: 1.10.2 jQuery UI Version:1.11 Dialog Position setting code: position{ my: "center top", at: "center top", of: window } ---------------------------------------------------------------------------------------- 以下只是我个人记录的内