JavaScript實現模態對話框實例

 更新時間:2020年01月13日 09:37:42   作者:Iceberg_710815   我要評論
這篇文章主要介紹了JavaScript實現模態對話框實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

這篇文章主要介紹了JavaScript實現模態對話框實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dialogue</title>
  <style>
    *{
      margin: 0;
    }
    .hide{
      display: none;
    }
    #div1{
      height: 2000px;
      background-color: #b4b4b4;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }
    #div2{
      /*display: none;*/
      background-color: red;
      opacity: 0.1;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

    }
    #div3{
      /*display: none;*/
      height: 200px;
      width: 200px;
      z-index: 1002;
      background-color: crimson;
      position: absolute;
      top: 50%;
      left:50%;
      margin-left: -100px;
      margin-top: -100px;
    }
  </style>
</head>
<body>
<div id="div1">
  <input type="button" value="click" onclick="show()">
</div>
<div id="div2" class="div hide"></div>
<div id="div3" class="div hide">
  <input type="button" value="cancel" onclick="cancel()">
</div>

<script>
  function show() {
    var ele = document.getElementsByClassName("div");
    for (var i = 0; i < ele.length; i++) {
      ele[i].classList.remove("hide");
      console.log(i);
    }
  }
   function cancel(){
      var ele=document.getElementsByClassName("div");
      for (var i=0;i<ele.length;i++){
        ele[i].classList.add(("hide"));
      }
   }

</script>
</body>
</html>

初始頁面如下:

點擊"click"后顯示如下:

點擊"cancel"后再回到初始畫面.

這段代碼模擬了模態對話框的實現過程.

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • js如何判斷用戶是否是用微信瀏覽器

    js如何判斷用戶是否是用微信瀏覽器

    微信內置瀏覽器屏蔽了下載鏈接,如果用戶是用微信內置瀏覽器打開的,則提示用戶換一個瀏覽器打開頁面,那么該如何判斷用戶是否是用微信瀏覽器呢
    2014-06-06
  • JavaScript Object的extend是一個常用的功能

    JavaScript Object的extend是一個常用的功能

    對Object的extend是一個常用的功能。舉一個例子,由于javascript 沒有重載(overload),而且函數的參數類型是沒有定義的,所以很多時候我們都傳入一個對象來作為參數已方便控制。
    2009-12-12
  • JS SetInterval 代碼實現頁面輪詢

    JS SetInterval 代碼實現頁面輪詢

    setInterval 是一個實現定時調用的函數,可按照指定的周期(以毫秒計)來調用函數或計算表達式。下面通過本文給大家分享JS SetInterval 代碼實現頁面輪詢,感興趣的朋友一起看看吧
    2017-08-08
  • JavaScript截取、切割字符串的技巧

    JavaScript截取、切割字符串的技巧

    這篇文章主要介紹了JavaScript截取、切割字符串的技巧,需要的朋友可以參考下
    2016-01-01
  • 微信小程序云開發詳細教程

    微信小程序云開發詳細教程

    這篇文章主要為大家詳細介紹了微信小程序云開發的詳細教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • JS識別瀏覽器類型(電腦瀏覽器和手機瀏覽器)

    JS識別瀏覽器類型(電腦瀏覽器和手機瀏覽器)

    本文給大家分享一段js代碼關于識別瀏覽器的類型是手機瀏覽器還是電腦瀏覽器,有需要的朋友可以參考下本文
    2016-11-11
  • JS中使用正則表達式g模式和非g模式的區別

    JS中使用正則表達式g模式和非g模式的區別

    這篇文章給大家詳細介紹了JS中使用正則表達式g模式和非g模式的區別,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-04-04
  • JS實現合并json對象的方法

    JS實現合并json對象的方法

    這篇文章主要介紹了JS實現合并json對象的方法,涉及javascript遞歸調用與json格式數據遍歷的相關操作技巧,需要的朋友可以參考下
    2017-10-10
  • js 計數排序的實現示例(升級版)

    js 計數排序的實現示例(升級版)

    這篇文章主要介紹了js 計數排序的實現示例(升級版),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • JS 中document.URL 和 windows.location.href 的區別

    JS 中document.URL 和 windows.location.href 的區別

    實際上,document 和 windows 這兩個對象的區別已經包含了這個問題的答案。
    2009-11-11

最新評論

pc蛋蛋幸运28app下载地址