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

时间：2024-03-23 07:43:52

弹出输入框

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

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

一、效果展示

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

二、html代码部分：

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

  <div id="dialogId" title="寄售信息" >
    <div style="text-align:center;">
      <label >寄售地址：</label>
      <input type="text" id="consignmentSender">
    </div>
    <div style="text-align:center;">
      <label>寄售电量：</label>
      <input type="text" id="totalEnergytoSell">
    </div>
    <div style="text-align:center;">
      <label>寄售总价：</label>
      <input type="text" id="totalPrice">
    </div>
  </div>

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

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://libs.baidu.com/jqueryui/1.10.2/jquery-ui.min.js"></script>

三、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/

相关文章