Boostrap 标准的远程弹出窗口页面样式_bootstrap 弹出url页面-CSDN博客

本文介绍了一个使用模态对话框实现远程审批功能的例子。通过HTML、JavaScript和JSP结合的方式，展示了如何创建一个用于回复站内消息的审批对话框，并详细说明了其各个组成部分的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、在主页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>