第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何將數(shù)據(jù)傳遞到普通 CSS/JS 模式

如何將數(shù)據(jù)傳遞到普通 CSS/JS 模式

幕布斯7119047 2023-11-02 17:16:03
我正在使用這個(gè) CSS/JS 模式,我想知道是否有任何方法可以將數(shù)據(jù)傳遞到模式,就像我們?cè)谝龑?dǎo)模式中使用數(shù)據(jù)切換一樣。我將在 PHP while 循環(huán)中使用它,以便打印不同的按鈕,并且我想在單擊該按鈕后將數(shù)據(jù)傳遞到模式,以便與該行關(guān)聯(lián)的數(shù)據(jù)將傳遞到模式或在單擊后打印在按鈕上。 ....是否可以使用這種類型的模態(tài)?<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {font-family: Arial, Helvetica, sans-serif;}/* The Modal (background) */.modal {  display: none; /* Hidden by default */  position: fixed; /* Stay in place */  z-index: 1; /* Sit on top */  padding-top: 100px; /* Location of the box */  left: 0;  top: 0;  width: 100%; /* Full width */  height: 100%; /* Full height */  overflow: auto; /* Enable scroll if needed */  background-color: rgb(0,0,0); /* Fallback color */  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content */.modal-content {  background-color: #fefefe;  margin: auto;  padding: 20px;  border: 1px solid #888;  width: 80%;}/* The Close Button */.close {  color: #aaaaaa;  float: right;  font-size: 28px;  font-weight: bold;}.close:hover,.close:focus {  color: #000;  text-decoration: none;  cursor: pointer;}</style></head><body><h2>Modal Example</h2><!-- Trigger/Open The Modal --><button id="myBtn">Open Modal</button><!-- The Modal --><div id="myModal" class="modal">  <!-- Modal content -->  <div class="modal-content">    <span class="close">&times;</span>    <p>Some text in the Modal..</p>  </div></div><script>// Get the modalvar modal = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("myBtn");// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks the button, open the modal btn.onclick = function() {  modal.style.display = "block";}// When the user clicks on <span> (x), close the modalspan.onclick = function() {  modal.style.display = "none";}
查看完整描述

1 回答

?
拉丁的傳說(shuō)

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊

您只需將data-*屬性添加到模式的主容器中即可稍后使用。


<div id="myModal" class="modal" data-foo="bar"> <!-- ... --> </div>


// Get the modal

var modal = document.getElementById("myModal");


/*...*/


// When the user clicks the button, open the modal 

btn.onclick = function() {

    modal.style.display = "block";


    // append data-foo value to the modal's content

    modal.querySelector('.modal-content p').innerText = modal.dataset.foo;

}

以下是數(shù)據(jù)集如何工作的示例: https: //codepen.io/kmsdevnet/pen/ExggvyP

數(shù)據(jù)集文檔: https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset


查看完整回答
反對(duì) 回復(fù) 2023-11-02
  • 1 回答
  • 0 關(guān)注
  • 147 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)