项目需求:点击文本框弹出模态框,利用AJAX获取数据并显示在模态框中
实现方法:利用bootstrap框架里面的bootbox控件,bootbox.prompt显示为提示框。
具体代码如下:
<div class="form-group"> <label class="col-sm-4 control-label no-padding-right" for="form-field-person">项目人员</label> <div class="col-sm-8"> <textarea class="col-xs-12 col-sm-10" type="text" id="input1" name="person" placeholder=""></textarea> </div> <script> $(document).on("click","#input1",function(e){ e.preventDefault(); var debateModal; $.ajax({ url: '${ctx}/user/getUserList.ht', type:"POST", data:{}, dataType:'json' }).done(function(info){ var options = []; for(var i=0;i<info.length;i++){ var user = {}; user.text = info[i].name; user.value = info[i].userName; options[i] = user; } debateModal=bootbox.prompt({ title: "选择项目人员", inputType: 'checkbox', inputOptions: options, callback: function (result) { console.log(result); } }); }); /* $('#input1').on('click', function (e) { $.ajax({ url: '${ctx}/user/getUserList.ht', type: 'POST', dataType: 'json' }).done(function (result) { console.log(result.Mensaje); }); }); */ /* bootbox.dialog({ //write like this can get data and display. message:'it can work...', title:'please choose', closeButton:true }); */ }); </script>最终显示: