弹出模式仅适用于数组中的第一个按钮

Question

我正在尝试为我正在设计的房地产网站实现弹出模式。当您进入代理页面时，每个代理都有自己的个人简介和一张 "contact" 卡片。选择名片时，会出现一个弹出模式，背景为灰色。我设法实现了模态，但它只对 9 数组中的第一个按钮起作用。我知道这与唯一 ID 有关，但我不完全确定如何执行它。任何建议都会有所帮助。

J。哈特


// Agent bio:

<section>
        <div class="row">
            <div class="column">
              <div class="cardB">                    
                    <img src="https://i.imgur.com/H8By9Ns.jpg" alt="Pondra Bowen" class="center-cardB" style="width:300px;height:300px;">
                <div class="container">
               "Agent's personal information redacted"
    <p><button id="myBtn" class="rounded">Contact</button></p>
                 </div>
              </div>
            </div>
        </div>

<section>



// The modal
<div id="myModal" class="modal">

  // Modal Content
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="flex">
        <div id="form-container">
            <h3>Contact Form</h3>
            <form>
                <label for="name">Name</label>
                <input type="text" id="name" />

                <label for="email">Email</label>
                <input type="text" id="email" />

                <label for="subject">Subject</label>
                <input type="text" id="subject" />

                <label for="message">Message</label>
                <textarea id="message" placeholder="Write your message here..."></textarea>

                <button class="rounded">Send Message</button>
            </form>
        </div>
    </div>
  </div>

</div>
</section>




<script>

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

</script>

Answer 1

我认为这是因为你这样做：

var btn = document.getElementById("myBtn"); 并且大概您只有 1 个名为 myBtn 的 ID，或者如果您有更多 ID，那么它每次都会调用它找到的第一个

你应该改变方法。将所有用户存储在具有唯一 ID 的对象数组中。 .map 在此数组上显示所有用户。然后当您单击其中一个时，将 ID 作为参数传入。然后使用 id 过滤数组以显示相关内容。下面的简化示例

const users = [
   {id: 1, name: 'Tom', email: 'tom@test.com},
   {id: 2, name: 'Sam', email: 'sametest.com},
]

然后映射到它们上以渲染它们

users.map((user) => 
   <div onClick={() => renderModalForCorrectUser(user.id)>
     <div> {user.name} </div>
     <div> {user.email} </div>
   </div>

然后

function renderModalForCorrectUser(id) {
    //find the correct user by id
    // then do the opening of the modal by passing in the relevant users details
}

弹出模式仅适用于数组中的第一个按钮

Pop-up modal only works on first button in array

html

javascript

css

modal-dialog

popup