Javascript 没有从 html 按钮调用

Question

我有以下 html 页面，其中包含“NewPatients”按钮，我试图将其设置为打开一个带有要填写的表单的模式。我似乎无法让模态出现。 javascript 中的“openModal”函数似乎没有被调用。

cshtml 文件:

@using PracticeApp.Controllers

@{
    ViewBag.Title = "Patients";
}

<script src="@Url.Content("../../Js/PatientFormModal.js")" type="text/javascript"></script>

<div class="title">
    <div>
        <h1 style="float: left">@ViewBag.Title</h1>
    </div>
    <div class="rmm" style="float: right; display: inline-block">
        <ul>
            <li><a href="javascript:void(0)" id="NewPatient">New Patient</a></li>
            <li><a href="javascript:void(0)" class="DeleteLink">Delete Patient(s)</a></li>
        </ul>
    </div>
</div>
<div class="content">
    <div id="modal_window">
        <div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>

        <p>Complete the form below to add a new patient:</p>

        <form id="add_patient" method="POST" action="#" accept-charset="UTF-8">
        <p><label>First Name<strong>*</strong><br>
        <input type="text" autofocus required size="48" name="fname" value=""></label></p>
        <p><label>Last Name<strong>*</strong><br>
        <input type="text" autofocus required size="48" name="lname" value=""></label></p>
        <p><label>Birthdate (mm/dd/yyyy)<strong>*</strong><br>
        <input type="text" autofocus required size="48" name="bday" value=""></label></p>
        <p><label>Practice Name<strong>*</strong><br>
        <input type="text" autofocus required size="48" name="location" value=""></label></p>
        <p><label>SSN<strong>*</strong><br>
        <input type="text" autofocus required size="48" name="ssn" value=""></label></p>
        <p><input type="submit" name="feedbackForm" value="Add Patient"></p>
        </form>
    </div>
</div>

这是 JavaScript 文件。 PatientFormModal.js:

var checkForm = function (e) {

    var dateRegEx = /^((0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2})*$/;
    var form = (e.target) ? e.target : e.srcElement;

    var modal_init = function () {
        var wrapper = document.getElementById("content");
        var window = document.getElementById("modal_window");

        var openModal = function (e) {
            alert("Here");
            wrapper.className = "overlay";
            window.style.marginTop = (-modal_window.offsetHeight) / 2 + "px";
            window.style.marginLeft = (-modal_window.offsetWidth) / 2 + "px";
            e.preventDefault ? e.preventDefault() : e.returnValue = false;
        };

        var closeModal = function (e) {
            wrapper.className = "";
            e.preventDefault ? e.preventDefault() : e.returnValue = false;
        };

        var clickHandler = function (e) {
            if (!e.target) e.target = e.srcElement;
            if (e.target.tagName == "DIV") {
                if (e.target.id != "modal_window") closeModal(e);
            }
        };

        var keyHandler = function (e) {
            if (e.keyCode == 27) closeModal(e);
        };

        if (document.addEventListener) {
            document.getElementById("NewPatient").addEventListener("click", openModal, false);
            document.getElementById("modal_close").addEventListener("click", closeModal, false);
            document.addEventListener("click", clickHandler, false);
            document.addEventListener("keydown", keyHandler, false);
        } else {
            document.getElementById("NewPatient").attachEvent("onclick", openModal);
            document.getElementById("modal_close").attachEvent("onclick", closeModal);
            document.attachEvent("onclick", clickHandler);
            document.attachEvent("onkeydown", keyHandler);
        }
    };

    if (form.fname.value == "") {
        alert("Please enter patient's first name");
        form.fname.focus();
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return;
    }
    if (form.lname.value == "") {
        alert("Please enter patient's last name");
        form.lname.focus();
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return;
    }
    if (form.bday.value == "") {
        alert("Please enter patient's date of birth");
        form.bday.focus();
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return;
    }
    if (document.add_patient.bday.value.search(dateRegEx)==-1) {
        alert("Please enter patient's date of birth in the specified format");
    }
    if (form.location.value == "") {
        alert("Please enter patient's practice name");
        form.location.focus();
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return;
    }
    if (form.ssn.value == "") {
        alert("Please enter patient's SSN");
        form.ssn.focus();
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return;
    }

    if (document.addEventListener) {
        document.getElementById("add_patient").addEventListener("submit", checkForm, false);
        document.addEventListener("DOMContentLoaded", modal_init, false);
    } else {
        document.getElementById("add_patient").attachEvent("onsubmit", checkForm);
        window.attachEvent("onload", modal_init);
    }
};

这也是模态的 CSS:

.content.overlay:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background: #000;
    background: rgba(0,0,0,0.7);
  }

  #modal_window {
    display: none;
    z-index: 200;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 360px;
    padding: 10px 20px;
    background: #fff;
    border: 5px solid #999;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
  }

  .content.overlay #modal_window {
    display: block;
  }

Answer 1

您的脚本在 HTML 之前加载，因此 DOM 元素 NewPatient 尚不可用 -> 事件未附加 -> 单击不起作用。

在 HTML 之后调用 PatientFormModal.js。

编辑:看起来你的 JS 没有被调用，所以在 JS 文件末尾添加 checkForm() 。