堆栈内存溢出
  繁体   English   中英

如何在弹出窗口而不是内部 html 中显示消息

[英]How to display a message in a popup instead of inner html

 原文  2020-02-13 07:17:04  7   1    javascript/ html/ css/ jsp/ popup

问题描述

我想显示一条消息，该消息根据来自输入字段附近的弹出窗口中的 db 的检查而更改，而不是作为跨度中的文本。 我正在运行一个值存在检查，它将从我的 html 调用一个 jsp 文件。它将跨度中的预期输出作为文本返回，但我希望它在弹出窗口中

贴出相关代码如下。 请帮忙

管理.html

<body>
    <script type="text/javascript">

        function checkExist() {
            var xmlhttp = new XMLHttpRequest();
            var policyname = document.forms["addPolicy"]["policy_name"].value;
            var url = "exist.jsp?policyname=" + policyname;
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    if (xmlhttp.responseText == "\n\n\n\n\nPolicy already exists")
                        document.getElementById("isE").style.color = "red";
                    else
                        document.getElementById("isE").style.color = "blue";
                    document.getElementById("isE").innerHTML = xmlhttp.responseText;
                    var popup = document.getElementById("isE");
                    popup.classList.toggle("show");
                }
            };
            try {
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            } catch (e) {
                alert("unable to connect to server");
            }
        }

    </script>
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="page-header">
                        <a href="search.html">Search patient</a>
                        <h1>Add New Policy</h1>
                    </div>
                    <!-- calling the java service on submit to save the policy details  -->
                    <form name="addPolicy" action="SavePolicy" method="post">

                        <label>Organization Name: *</label>&emsp;&emsp;&nbsp;&nbsp;<input
                            type="text" list="orglist" name="org" required /></label>
                        <div class="dropdown">
                            <div id="myDropdown" class="dropdown-content">
                                <datalist id="orglist">
                                    <option value="Sagar">
                                    <option value="Appollo">
                                    <option value="Nehru">
                                </datalist>
                            </div>
                        </div>
                        <br> <br> <br> <br> <br> <br> <label
                            style="text-decoration: underline;">Policy Details</label>
                        <div class="policy_details">
                            <label>Policy Name:*</label>&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;
                            <input type="text" name="policy_name" pattern="[A-Za-z]+"
                                placeholder="Enter the policy name"
                                oninput="this.reportValidity();" onblur="checkExist()" required /><br>
                            <span id="isE" class="popuptext"></span><br>
                            <br> <label>Start date of the Policy:*</label>&emsp; <input
                                type="text" name="sop" id="sop" data-date-format='yy-mm-dd'
                                placeholder='yyyy-mm-dd' required readonly /><br> <br>
                            <script type="text/javascript">
                                $(document).ready(function() {
                                    $("#sop").datepicker();
                                });
                            </script>
                            <label>End date of the Policy:*</label>&emsp;&nbsp; <input
                                type="text" name="eop" id="eop" data-date-format='yy-mm-dd'
                                placeholder='yyyy-mm-dd' required readonly />
                            <script type="text/javascript">
                                $(document).ready(function() {
                                    $("#eop").datepicker();
                                });
                            </script>

                        </div>
                        <br> <br> <input type="submit" class="btn btn-primary"
                            value="Save Policy" />&emsp;<input type="reset"
                            class="btn btn-primary" value="Clear" />
                    </form>
                    <br> <a href="ViewPolicy">View Policies</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

    /* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

1 个解决方案

解决方案1
 1 已采纳  2020-02-13 14:45:32

你需要用一些外部容器包围你的<span></span> ，即： <div>以便每当 ajax 被调用时，响应将显示在弹出窗口中。如下所示： 

 var popup = document.getElementById("isE"); popup.innerHTML = " something";//xmlhttp.responseText popup.classList.toggle("show");
 .popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* The actual popup */ .popup .popuptext { visibility: hidden; width: 200px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; } /* Popup arrow */ .popup .popuptext::after { content: ""; position: absolute; top: 90%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class - hide and show the popup */ .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 <div class="popup"> <span id="isE" class="popuptext"> </span> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在html弹出窗口上显示javascript验证消息 在弹出窗口中显示名称，而不是以下代码中的问候消息。 如何在弹出窗口中显示 jquery 验证错误消息？ 在同一页面中显示弹出消息，用于 PHP 的 HTML 联系表单 如何在文本框中显示内部HTML输出 HTML onload弹出消息 在需要时如何显示弹出错误/成功消息？ 如何显示等待光标和消息弹出窗口打开时加载 如何在删除 php 中的产品之前显示弹出消息 如果使用jquery，如何检查文本框是否为空并显示弹出消息？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM