模態框對話

時間 2019-12-10

標籤模態對話简体版

原文原文鏈接

什麼是模態框

簡單來講，模態框就是在原有的界面上新增一個窗口，css

以保證在不刷新網頁的前提下和後臺完成交互。html

廢話很少說，先來看效果圖jquery

如圖，咱們明顯能夠看到網頁上面新增了一個窗口，這也就是常見的模態框樣式ide

模態框結構

由上圖看出，彈出的最上面一層和本來明顯不在一層，模態框具體可分爲三分：spa

一、文本層code

　　文本層就是本來的頁面，他存在於三層圖層最下面的一層htm

　　不用操做樣式blog

二、陰影層事件

　　陰影層就是看着灰濛濛的那一層，位於三層圖層中間的一層ip

　　咱們須要把陰影層進行定位(fixed)，讓他蓋在文本層之上

三、彈出框層

　　咱們看到的和須要輸入內容(完成信息的先後臺交互)的一層就是彈出框層，

　　位於三層圖層最上面一層，咱們也須要把這一層進行定位(fixed)，使他位於陰影層之上顯示

注：既然陰影層和彈出框層都須要定位(fixed),那麼誰顯示在上面就須要根據z-index來肯定

簡單模態框對話代碼

1.先寫html代碼

2.再寫css樣式

3.利用jquery代碼綁定點擊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡易模態框</title>
    <style>
        /*咱們先來把陰影層樣式搞定,大小爲全屏窗口,透明度調低一些,這樣能夠看到文本框的內容*/
        .shadow{
            width: 100vw;
            height: 100vh;
            background-color: black;
            opacity: 0.4;
            top: 0;
            left: 0;
            position: fixed;
            display: none;  /*先讓他不顯示，而後咱們點擊按鈕顯示*/
            z-index: 6;
        }
        /*彈出框層設置基本差很少，須要注意把z-index設的比陰影層高*/
        .frame{
            width: 300px;
            height: 300px;
            background-color: white;
            position: fixed;
            top: 200px;
            left: 400px;
            z-index: 66;
            display: none;  /*先讓他不顯示，而後咱們點擊按鈕顯示*/
        }
    </style>
</head>
<body>
<!--這裏咱們就把body當成咱們的文本層-->
<h1>這是文本層</h1>
<button type="button" class="show">點我彈出模態框</button>

<!--再來建立陰影層-->
<div class="shadow"></div>

<!--建立彈出框層-->
<div class="frame">
    <span>這是彈出框層</span><br>
    <input type="text">
    <input type="button" value="提交" class="submit">
    <input type="button" value="取消" class="cancel">
</div>

</body>
<!--導入jquery-->
<script
  src="http://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>

<script>
    //第一步，咱們須要監視文本層的按鈕，一點擊咱們就把模態框顯示出來
    $('.show').click(function () {
        $('.shadow').show();
        $('.frame').show();
    });
    //第二步，咱們須要監視彈出框層的取消按鈕，一點擊就把模態框隱藏起來
    $('.cancel').click(function () {
        $('.shadow').hide();
        $('.frame').hide();
    });
    //到此位置，簡易模態框就完成了
</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。