当前位置： 文江博客话题详情

为什么相同的HTML按钮在外部表单外工作，而在表单内部不工作

发布于 2025-01-27 02:44:18 字数 3530 浏览 4 评论 0原文

我有一个带有CSS和JS的HTML文件。 然后，当单击时，我有一个按钮显示模式。而且这很好。 但是，当我在表单中复制相同的按钮（完全相同）时，此按钮无能为力（不显示模态）。 怎么了？ 我读了很多东西，并做出了许多不同的尝试来解决它，但什么都没有。

在两种情况下（表单外部和内部），我标记了我所指的[*]的按钮。

怎么了？

当我单击表单内的按钮时，模态也应打开。

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Open Modal</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 15px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(80, 80, 80);
      background-color: rgba(0, 80, 80, 0.4);
    }
    
    .modal-content {
      background-color: #f9f980;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 40%;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      // Get value on button click and show alert
      $("#showModalBtn").click(function() {
        var modal = document.getElementById("myModal");
        modal.style.display = "contents";
      });
      $("#closeModalBtn").click(function() {
        var str = $("#textValor").val();
        var modal = document.getElementById("myModal");
        modal.style.display = "none";
      });
    });
  </script>
</head>

<body>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <p>Text inside modal!!!</p>
      <p>This is a text inside the modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal,
        modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal.</p>
      <button type="button" id="closeModalBtn">Close Modal</button>
    </div>
  </div>
  <button type="button" id="showModalBtn">Open Modal [*] (Outside FORM)</button>
  <p>&nbsp;</p>
  <table width="600" border="1" cellpadding="0" cellspacing="0">
    <form action="#" method="post" enctype="multipart/form-data">
      <tr>
        <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
        <td align="center" valign="middle">
          <input type="submit" value="Process FORM (Input type submit)">
          <input type="submit" name="showModalBtn" value="Open Modal (Input type Submit)">
          <input type="button" name="showModalBtn" value="Open Modal (Input type Button)">
          <button type="button" id="showModalBtn">         Open Modal [*] (Button type Button)</button>
          <button type="submit" id="showModalBtn">         Open Modal (Button type Submit)</button>
        </td>
        <td valign="top">&nbsp;</td>
      </tr>
    </form>
  </table>
</body>

</html>

原文

I have an HTML file with CSS and JS combined.
I have a Button then, when clicked, shows a modal. And this works fine.
But, as I copied the same Button (exactly the same) inside a FORM, this Button does nothing (do not show the Modal).
Whats wrong?
I have read a lot and made a lot of different attempts to solve it, but nothing.

I marked the button I'm referring to with [*], in both cases (outside and inside the form).

What's wrong?

The modal should open too when I click the button inside the form as well.

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Open Modal</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 15px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(80, 80, 80);
      background-color: rgba(0, 80, 80, 0.4);
    }
    
    .modal-content {
      background-color: #f9f980;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 40%;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      // Get value on button click and show alert
      $("#showModalBtn").click(function() {
        var modal = document.getElementById("myModal");
        modal.style.display = "contents";
      });
      $("#closeModalBtn").click(function() {
        var str = $("#textValor").val();
        var modal = document.getElementById("myModal");
        modal.style.display = "none";
      });
    });
  </script>
</head>

<body>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <p>Text inside modal!!!</p>
      <p>This is a text inside the modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal,
        modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal.</p>
      <button type="button" id="closeModalBtn">Close Modal</button>
    </div>
  </div>
  <button type="button" id="showModalBtn">Open Modal [*] (Outside FORM)</button>
  <p> </p>
  <table width="600" border="1" cellpadding="0" cellspacing="0">
    <form action="#" method="post" enctype="multipart/form-data">
      <tr>
        <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
      </tr>
      <tr>
        <td valign="top"> </td>
        <td align="center" valign="middle">
          <input type="submit" value="Process FORM (Input type submit)">
          <input type="submit" name="showModalBtn" value="Open Modal (Input type Submit)">
          <input type="button" name="showModalBtn" value="Open Modal (Input type Button)">
          <button type="button" id="showModalBtn">         Open Modal [*] (Button type Button)</button>
          <button type="submit" id="showModalBtn">         Open Modal (Button type Submit)</button>
        </td>
        <td valign="top"> </td>
      </tr>
    </form>
  </table>
</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

难以启齿的温柔 2025-02-03 02:44:18

ID需要是唯一的。 ，请使用类并导航到兄弟姐妹元素（此处不需要），

您也应该使用显示和隐藏的方式而不是设置样式

，我的代码实际上以模态模式显示了模式

如果需要 单击“提交”按钮（event.preventdefault（））时，将模式保留在页面上

$(document).ready(function() {
  // Get value on button click and show alert
  $(".showModalBtn").on("click", function() {
    $("#myModal").show()
  });
  $("#closeModalBtn").on("click", function() {
    $("#myModal").hide()
  });
});
body {
  font-family: Arial, Helvetica, sans-serif;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 15px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(80, 80, 80);
  background-color: rgba(0, 80, 80, 0.4);
}

.modal-content {
  background-color: #f9f980;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Text inside modal!!!</p>
    <p>This is a text inside the modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal,
      modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal.</p>
    <button type="button" id="closeModalBtn">Close Modal</button>
  </div>
</div>
<button type="button" class="showModalBtn">Open Modal [*] (Outside FORM)</button>
<p> </p>
<table width="600" border="1" cellpadding="0" cellspacing="0">
  <form action="#" method="post" enctype="multipart/form-data">
    <tr>
      <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
    </tr>
    <tr>
      <td valign="top"> </td>
      <td align="center" valign="middle">
        <input type="submit" value="Process FORM (Input type submit)">
        <input type="submit" name="showModalBtn" value="Open Modal (Input type Submit)">
        <input type="button" name="showModalBtn" value="Open Modal (Input type Button)">
        <button type="button" class="showModalBtn">         Open Modal [*] (Button type Button)</button>
        <button type="submit" class="showModalBtn">         Open Modal (Button type Submit)</button>
      </td>
      <td valign="top"> </td>
    </tr>
  </form>
</table>

IDs need to be unique. Use a class and navigate to the sibling elements if needed (not needed here)

Also you should use show and hide instead of setting style

As you can see, my code actually shows the modal in modal mode

You will need more code if you want to keep the modal on the page when you click a submit button (event.preventDefault())

$(document).ready(function() {
  // Get value on button click and show alert
  $(".showModalBtn").on("click", function() {
    $("#myModal").show()
  });
  $("#closeModalBtn").on("click", function() {
    $("#myModal").hide()
  });
});
body {
  font-family: Arial, Helvetica, sans-serif;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 15px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(80, 80, 80);
  background-color: rgba(0, 80, 80, 0.4);
}

.modal-content {
  background-color: #f9f980;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Text inside modal!!!</p>
    <p>This is a text inside the modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal,
      modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal.</p>
    <button type="button" id="closeModalBtn">Close Modal</button>
  </div>
</div>
<button type="button" class="showModalBtn">Open Modal [*] (Outside FORM)</button>
<p> </p>
<table width="600" border="1" cellpadding="0" cellspacing="0">
  <form action="#" method="post" enctype="multipart/form-data">
    <tr>
      <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
    </tr>
    <tr>
      <td valign="top"> </td>
      <td align="center" valign="middle">
        <input type="submit" value="Process FORM (Input type submit)">
        <input type="submit" name="showModalBtn" value="Open Modal (Input type Submit)">
        <input type="button" name="showModalBtn" value="Open Modal (Input type Button)">
        <button type="button" class="showModalBtn">         Open Modal [*] (Button type Button)</button>
        <button type="submit" class="showModalBtn">         Open Modal (Button type Submit)</button>
      </td>
      <td valign="top"> </td>
    </tr>
  </form>
</table>

回复 原文
平安喜乐 2025-02-03 02:44:18

问题在于，您将ID属性用作jQuery选择器。当您将ID属性用作选择器时，jQuery将侦听器附加到具有给定ID的第一个元素。

Actaully您绝对不应具有HTML代码中具有相同ID的两个元素。

您可以使用类而不是ID轻松解决问题：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Modal</title>
    <style>
        body {font-family: Arial, Helvetica, sans-serif;}
        .modal {
          display: none; 
          position: fixed; 
          z-index: 1; 
          padding-top: 15px; 
          left: 0;
          top: 0;
          width: 100%; 
          height: 100%; 
          overflow: auto; 
          background-color: rgb(80,80,80); 
          background-color: rgba(0,80,80,0.4); 
        }
        .modal-content {
          background-color: #f9f980; 
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 40%; 
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            // Get value on button click and show alert
            $(".showModalBtn").click(function(){
            var modal = document.getElementById("myModal");
            modal.style.display = "contents";
            });
            $("#closeModalBtn").click(function(){
            var str = $("#textValor").val();
            var modal = document.getElementById("myModal");
            modal.style.display = "none";
            });
        });
    </script>
</head>
<body>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <p>Text inside modal!!!</p>
            <p>This is a text inside the modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal.</p>
            <button type="button" id="closeModalBtn">Close Modal</button>
        </div>
    </div>
    <button type="button" class="showModalBtn">Open Modal [*] (Outside FORM)</button>
    <p> </p>
    <table width="600" border="1" cellpadding="0" cellspacing="0">
        <form action="#" method="post" enctype="multipart/form-data">
            <tr> 
                <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
            </tr>
            <tr>
                <td valign="top"> </td>
                <td align="center" valign="middle">
                    <input  type="submit"                     value="Process FORM (Input type submit)">
                    <input  type="submit" name="showModalBtn" value="Open Modal (Input type Submit)" >
                    <input  type="button" name="showModalBtn" value="Open Modal (Input type Button)" >
                    <button type="button" class="showModalBtn">         Open Modal [*] (Button type Button)</button>
                    <button type="submit" id="showModalBtn">         Open Modal (Button type Submit)</button>
                </td>
                    <td valign="top"> </td>
            </tr>
        </form>
    </table>
</body>
</html>

the problem is that you use the id property as jquery selector. When you use the id property as selector, jquery attach the listener to the first element found with the given id.

Actaully you should never have two elements with the same id in your html code.

You can easily resolve the problem using a class instead of id:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Modal</title>
    <style>
        body {font-family: Arial, Helvetica, sans-serif;}
        .modal {
          display: none; 
          position: fixed; 
          z-index: 1; 
          padding-top: 15px; 
          left: 0;
          top: 0;
          width: 100%; 
          height: 100%; 
          overflow: auto; 
          background-color: rgb(80,80,80); 
          background-color: rgba(0,80,80,0.4); 
        }
        .modal-content {
          background-color: #f9f980; 
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 40%; 
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            // Get value on button click and show alert
            $(".showModalBtn").click(function(){
            var modal = document.getElementById("myModal");
            modal.style.display = "contents";
            });
            $("#closeModalBtn").click(function(){
            var str = $("#textValor").val();
            var modal = document.getElementById("myModal");
            modal.style.display = "none";
            });
        });
    </script>
</head>
<body>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <p>Text inside modal!!!</p>
            <p>This is a text inside the modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal.</p>
            <button type="button" id="closeModalBtn">Close Modal</button>
        </div>
    </div>
    <button type="button" class="showModalBtn">Open Modal [*] (Outside FORM)</button>
    <p> </p>
    <table width="600" border="1" cellpadding="0" cellspacing="0">
        <form action="#" method="post" enctype="multipart/form-data">
            <tr> 
                <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
            </tr>
            <tr>
                <td valign="top"> </td>
                <td align="center" valign="middle">
                    <input  type="submit"                     value="Process FORM (Input type submit)">
                    <input  type="submit" name="showModalBtn" value="Open Modal (Input type Submit)" >
                    <input  type="button" name="showModalBtn" value="Open Modal (Input type Button)" >
                    <button type="button" class="showModalBtn">         Open Modal [*] (Button type Button)</button>
                    <button type="submit" id="showModalBtn">         Open Modal (Button type Submit)</button>
                </td>
                    <td valign="top"> </td>
            </tr>
        </form>
    </table>
</body>
</html>

回复 原文
~没有更多了~

关于作者

小镇女孩

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文