真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

    開(kāi)始演示模態(tài)框



  
    
      
        
          ×
        
        
          模態(tài)框（Modal）標(biāo)題
        
      

下面是一個(gè)原生模態(tài)框的HTML結(jié)構(gòu)：

顯示模態(tài)框



  HTML5原生模態(tài)框

基礎(chǔ)的模態(tài)框樣式

我們已經(jīng)看到了對(duì)話框元素的最簡(jiǎn)單標(biāo)記，您可能已經(jīng)注意到open是上面對(duì)話框中的屬性。將該屬性添加到元素將強(qiáng)制顯示對(duì)話框，否則將刪除它。該對(duì)話框也將絕對(duì)定位在頁(yè)面上。

上圖展示了一個(gè)最基本的模態(tài)框樣式。

打開(kāi)瀏覽器可以查看到它的基本樣式是這樣的：

dialog {
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  width: -webkit-fit-content;
  height: -webkit-fit-content;
  color: black;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 1em;
  background: white;
}

dialog元素還引入了一個(gè)新的偽類(lèi)選擇器::backdrop，通過(guò)瀏覽器查看到默認(rèn)的::backdrop樣式如下：

dialog::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}

設(shè)置對(duì)話框樣式

我們可以像任何HTML元素一樣設(shè)置dialog元素的樣式，幾乎所有的CSS樣式都可以。通過(guò)::backdrop偽類(lèi)選擇器，我們可以用它來(lái)設(shè)置背景的樣式。

例如：

dialog{
  margin-top:200px;
  width:250px;
  height:250px;
  text-align:center;
  line-height:250px;
  border-radius: 4px;
  border: none;
  box-shadow: 0 0 15px lightgray;
}
            
dialog::backdrop {
  background: rgba(black, .5);
}

上面的樣式效果如下圖：

對(duì)話框操作 API

下面是一個(gè)基本的對(duì)話框，因?yàn)闆](méi)有設(shè)置open屬性，所以它不會(huì)在視覺(jué)上顯示任何東西。您需要使用JavaScript API來(lái)顯示/隱藏它:

這是dialog對(duì)話框！

dialog元素的.show()和.close()兩個(gè)api分別是顯示和關(guān)閉對(duì)話框，通過(guò)在DOM元素上使用這兩個(gè)api，您可以顯示和關(guān)閉對(duì)話框。

例如：

  
這是dialog對(duì)話框！
  關(guān)閉對(duì)話框

顯示對(duì)話框
  
      

你可以傳遞一個(gè)參數(shù)給dialog.close()。通過(guò)監(jiān)聽(tīng)dialog元素的close事件，該dialog.returnValue屬性將返回給定的值。

如：

  
這是dialog對(duì)話框！
  

  關(guān)閉對(duì)話框

顯示對(duì)話框

顯示dialog對(duì)話框的另一個(gè)api是.showModal()

如果你不希望用戶(hù)與對(duì)話框以外的其他頁(yè)面元素對(duì)象進(jìn)行交互，那么請(qǐng)使用.showModal()打開(kāi)對(duì)話框而不是使用.show()。用.showModal()打開(kāi)的對(duì)話框會(huì)有一個(gè)全窗口的半透明背景層，阻斷用戶(hù)與對(duì)話框之外的頁(yè)面元素對(duì)象進(jìn)行交互，同時(shí)對(duì)話框會(huì)默認(rèn)顯示在窗口正中間（上下左右都居中）；而用.show()打開(kāi)的對(duì)話框會(huì)默認(rèn)顯示在窗口頂部（可以通過(guò)css實(shí)現(xiàn)居中顯示）。

關(guān)閉對(duì)話框后，close會(huì)觸發(fā)一個(gè)事件。另外，用戶(hù)可以通過(guò)輸入“Escape”鍵來(lái)關(guān)閉模式對(duì)話框。這將激發(fā)cancel您可以取消使用的事件event.preventDefault()。

與表單集成使用

您可以使用form[method="dialog"]將表單與一個(gè)

  
    
你是否同意使用條款？
    
條款要求...
    是
    否