Boostrap 标准的远程弹出窗口页面样式

来源：互联网发布：淘宝评价管理在哪编辑：程序博客网时间：2024/04/18 11:48

一、在主页modal代码：

<!-- 调用远程审批对话框 --><div class="modal fade" id="large-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog modal-large" role="document"> <div class="modal-content"></div></div></div>

二、调用的js代码：

function replyMessage(id){              var url = "${ctx}/jsp/system/messageReply.jsp";        $modal.modal({            remote: url +"?title=回复站内信"        });    }

三、远程页面代码：

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%><%@ include file="/common/taglibs.jsp" %><div class="modal-header">    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>    <h4 class="modal-title" id="myModalLabel">${param.title}</h4></div><div class="modal-body">    <form id="replyMsgForm" method="post" role="form" class="form-horizontal">          <div class="form-group has-feedback">            <label class="col-md-2 control-label" for="receiveNames">接收人：</label>            <div class="col-md-10">                 <span class="glyphicon glyphicon-user form-control-feedback" ></span>                 <input id="receiveNames" name="receiveNames" class="form-control" value="${receiveNames}" type="text" readonly onclick="openModal('receiveIds','receiveNames','user','1','');"/>                 <input id="receiveIds" name="receiveIds" value="${receiveIds}" type="hidden">             </div>          </div>          <div class="form-group has-feedback">            <label class="col-md-2 control-label" for="subject">主题：</label>            <div class="col-md-10">            <input id="subject" name="subject" value="${subject}" class="form-control" readonly="readonly"/>            </div>          </div>          <div class="form-group has-feedback">            <label class="col-md-2 control-label" for="fileContent">内容：</label>            <div class="col-md-10">            <textarea  id="fileContent" name="content" class="form-control" rows="3">${content }</textarea>            </div>          </div>    </form></div><div class="modal-footer">    <button type="button" class="btn btn-default" data-dismiss="modal" id="taskList-modal-close">关闭</button>    <button type="button" class="btn btn-primary" id="messageReply-modal-save">回复</button></div><script type="text/javascript">    CKEDITOR.replace('fileContent',{        customConfig : '${ctx}/ckeditor/ckeditor_config.js'    });    function checkInput(){        $("#fileContent").val(CKEDITOR.instances["fileContent"].getData());        var receiveNames = $('#receiveNames').val();        if(sy.isEmpty(receiveNames)){            alert('请选择接收人！');            return false;        }        if(sy.isEmpty($('#subject').val())){            alert('请填写回复主题！');            return false;        }        return true;    }    //--打开组织架构人员窗口------------------------------------    var $largeModal =$("#large-modal");    function openModal(fieldid, fieldname, orgType, multiple, callMethodName, extraStr){        var vid = $('input[id="'+fieldid+'"]').val();        var vname = $('input[id="'+fieldname+'"]').val();        var title = "请选择人员名称";        // 参数的拼接        var paramStr = 'fieldid='+fieldid+'&fieldname='+fieldname+'&orgType='+orgType+'&vid='+vid+'&vname='+vname+                   '&multiple='+multiple+'&callMethodName='+callMethodName+'&extraStr='+extraStr+'&title='+title;        var url = '${ctx}/org/orgInfoAction!showOrgPage.action?'+paramStr;        $largeModal.modal({            remote: url        });    }</script>

0 0