web编程学习：：弹出输入框

弹出输入框

---

本篇以html+css+jquery+jquery-ui实现web弹出窗口，用以填写资料做下一步应用。

参考资料： jquery-ui官方文档中文版、cdn-jquery源

一、效果展示

二、html代码部分：

（1）html的其他部分就不展示出来了，以下部分就是上面的窗口部分。

  

    

      寄售地址：
      
    
    

      寄售电量：
      
    
    

      寄售总价：
      
    
  

（2）引入js：注意引用的顺序

三、js脚本部分

$(document).ready(function(){
  //隐藏信息输入框
  $("#dialogId").hide();
});

//这里为显示窗口的js代码，可以新建一个按钮来触发
function showDialog(){
  $("#dialogId").dialog({
    //height:300,
    //width:200,
    //modal:true,
    draggalbe:true,
    minWidth:400,
    buttons:{
      "确认":function(){

      },
      "取消":function(){
        $(this).dialog("destroy");
      }
    }
  });
  //$("#consignmentSender").val($("#eth_account").val());
}

四、可能出现的问题

（1）使用"close"关闭窗口时，可能会出现a.browser is undefined 的问题，原因是jquery 1.9版本之后就不再支持.browser了，只需把对应的jquery-ui.js换成更新的版本即可。

五、关于样式问题

（1）可直接下载或构筑自己的ui主题：http://jqueryui.com/themeroller/