Java Struts 1 无法应用 JavaScript 和 CSS

Question

在 Struts 1 中构建模式，但在尝试将 Js 和 css 应用于我公司的应用程序时遇到问题。 Web 页面内置于 struts 1 中，所有 web 内容均采用 JSP 文件的形式。 在每个 JSP 文件的顶部有 JS 然后 HTML4 和 html 中的一些 struts 自定义标签。

我尝试使用 class=""、classType、styleClass、id，但似乎无法在 JS 和 css 中选择元素。 我无法设计任何样式，也无法在网上看到任何与之相关的内容。 我正在尝试使用 javascript 打开和关闭模式，但 onClick 由于某种原因没有调用 JS。 我还在全局脚本中尝试了 JS，但这也不起作用，可能是因为它运行得太早并且再也不会运行了。 我将 JS 放入 function 并用 onclick 调用它，但这也不起作用。

这是我正在处理的标签。

JS 的图像为由 onclick function 触发的 onClick

HTML

我正在尝试实现的模态图片

呈现模态

HTML

<div styleClass="mainAdvanceModal">
    <button id="advanceModalBtn" styleClass="advanceButton">Click Here</button>
    <div id="simpleModal" styleClass="modal">
        <div classType="modal-content">
            <span styleClass="modalCloseBtn">&times;</span>
            <p>Hello... I am modal</p>
        </div>
    </div>
</div>
<!-- This button works as intended. I will connect this button to the modal, once I get this working. !-->
<nested:equal name="user" property='<%="permission(" + Common.PERMISSION_QUEUED_SEARCH + ")"%>' value="true">
        <html:button property="method" styleClass="MiddleButton" style="cursor:default;" onclick="advanceModal()"><bean:message key="button.advance.value"/></html:button>
</nested:equal>

JS

// Get modal element
var modal = document.getElementById('simpleModal');
// Get open modal button
var modalBtn = document.getElementById('advanceModalBtn');
// Get close button
var closeBtn = document.getElementsByClassName('modalCloseBtn')[0];

function advanceModal() {
    // Get modal element
    var modal = document.getElementById('simpleModal');
    // Get open modal button
    var modalBtn = document.getElementById('advanceModalBtn');
    // Get close button
    var closeBtn = document.getElementsByClassName('modalCloseBtn')[0];

    // Listen for click
    modalBtn.addEventListener('click', openModal);
    //Listen for close click
    closeBtn.addEventListener('click', closeModal);
    //list for outside click
    window.addEventListener('click', outsideClick);
}


//Function to open modal
function openModal() {
    modal.style.display = 'block';
}

//function to close modal
function closeModal() {
    modal.style.display = 'none';
}

//function to close modal on outside click
function outsideClick(e) {
    if (e.target === modal) {
        modal.style.display = 'none';
    }
}

`

CSS

.mainAdvanceModal{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

.advanceButton{
    background: coral;
    padding:1em 2em;
    color: #fff;
    border:0;
}

.advanceButton:hover{
    background: #333;
}

.modal{
    /* control display none from javascript */
    display:none; 
    position: fixed;
    z-index:1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.modal-content{
    background-color: #f4f4f4;
    margin: 20% auto;
    padding: 20px;
    width: 70%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17);
}

.modalCloseBtn{
    color: #ccc;
    float: right;
    font-size: 30px;
}

.modalCloseBtn:hover, .modalCloseBtn:focus{
    color: #000;
    text-decoration: none;
    cursor: pointer;
}