Landy Blog
0%

bootstrap_Modal互動視窗

發表於 更新於 分類於

Modal是一個彈出的互動視窗

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="demo">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch by id
  </button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".exampleModal_class">
    Launch by className
  </button>
  
  <!-- Modal -->
  <div class="modal fade exampleModal_class" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

data-toggle和data-target

以上這個範例可以看到button上面有綁定data-toggle="modal"和data-target="#exampleModal"
如此就可以看得出來該button要觸發的區塊是id為exampleModal，
接下來你只要為那個被觸發的區塊的id取上exampleModal，就可以實現Modal的功能囉。

data-target綁定的對象

data-target除了可以綁定id以外，也可以綁定className喔，
你可以看到上面Launch by className的按鈕，他的data-target就是去綁定對應區塊的className。

data-dismiss

這個功能是在跳出來的區塊中，右上方會有一個叉叉，當你按下這個叉叉後，就可以將這個跳出的區塊取消掉了。
那達成這個取消的功能，還有另一種方法，就是你按這個跳出的區塊以外的範圍就可以了。

Modal觸發區塊尺寸大小

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="demo">
  <button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-1">Large modal</button>

  <div class="modal fade bd-example-modal-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        ...
      </div>
    </div>
  </div>

  <!-- Small modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-2">Small modal</button>

  <div class="modal fade bd-example-modal-2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        ...
      </div>
    </div>
  </div>
</div>

以上的範例你可以看到我們在彈出的區塊中的class名稱加入modal-lg 或 modal-sm，如此，就可以控制這個彈出視窗的大小囉。

Navbar 可以被隱藏起來

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="demo">
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</div>

你可以看到在nav標籤裡面有一個navbar-expand-md的class名稱，你將後面的md改成sm或lg其他斷點的className，就可以自己決定在哪個斷點下，該navbar會被隱藏起來。

上面有講了怎麼讓該navbar的內容隱藏起來，接著，你要為相對的漢堡選單按鈕的data-target加入該被隱藏起來的區塊的id，如此一來，你就可以透過該漢堡選單來開闔這個被隱藏起來的選單。

漢堡選單按鈕加入data-toggle=”collapse”

另外，你也要為這個navbar的漢堡選單按鈕加上data-toggle="collapse"的內容喔，如此，他才會有收闔的功能。

如果你要在navbar中加入你的品牌，此時，就可以使用navbar-brand
ex:

1
2
3
4
5
6
7
<div class="demo">
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="http://www.hexschool.com/images/logo.png" width="164" height="39" alt="">  
    </a>
  </nav>
</div>

他就會幫你這個品牌的區塊加上一些設定，讓他更協調。

分別有以下幾種定位方式

  1. fixed-top
  2. fixed-bottom
  3. sticky-top

    fixed-top

    ex:
    1
    2
    3
    4
    <div class="demo">
      <nav class="navbar navbar-light bg-light fixed-yop">
        <a class="navbar-brand" href="#">Fixed top</a>
      </nav>
    navbar會被固定在上方

    fixed-bottom

    ex:
    1
    2
    3
    4
    5
    <div class="demo">
      <nav class="navbar navbar-light bg-light fixed-bottom">
        <a class="navbar-brand" href="#">Fixed bottom</a>
      </nav>
     </div>
    navbar會被固定在下方

sticky-top

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<div class="list-group">
  
    
      <a href="/components/alerts.html"  class="list-group-item  sticky-top" style="top="10px";">
        Alerts
      </a>
    
  
    
      <a href="/components/badge.html"  class="list-group-item">
        Badge
      </a>
    
  
    
      <a href="/components/breadcrumb.html"  class="list-group-item">
        Breadcrumb
      </a>
    
  
    
      <a href="/components/buttons.html"  class="list-group-item">
        Buttons
      </a>
    
  
    
      <a href="/components/button-group.html"  class="list-group-item">
        Button Group
      </a>
    
  
    
      <a href="/components/card.html"  class="list-group-item">
        Card
      </a>
    
  
    
      <a href="/components/carousel.html"  class="list-group-item">
        Carousel
      </a>
    
  
    
      <a href="/components/collapse.html"  class="list-group-item">
        Collapse
      </a>
    
  
    
      <a href="/components/dropdowns.html"  class="list-group-item">
        Dropdowns
      </a>
    
  
    
      <a href="/components/forms.html"  class="list-group-item">
        Forms
      </a>
    
  
    
      <a href="/components/input-group.html"  class="list-group-item">
        Input Group
      </a>
    
  
    
      <a href="/components/jumbotron.html"  class="list-group-item">
        Jumbotron
      </a>
    
  
    
      <a href="/components/list-group.html"  class="list-group-item">
        List Group
      </a>
    
  
    
      <a href="/components/modal.html"  class="list-group-item">
        Modal
      </a>
    
  
    
      <a href="/components/nav.html"  class="list-group-item">
        Nav
      </a>
    
  
    
      <a href="/components/navbar.html"  class="list-group-item active">
        Navbar
      </a>
    
  
    
      <a href="/components/pagination.html"  class="list-group-item">
        Pagination
      </a>
    
  
    
      <a href="/components/popovers.html"  class="list-group-item">
        Popovers
      </a>
    
  
    
      <a href="/components/progress.html"  class="list-group-item">
        Progress
      </a>
    
  
    
      <a href="/components/scrollspy.html"  class="list-group-item">
        Scrollspy
      </a>
    
  
    
      <a href="/components/tooltips.html"  class="list-group-item">
        Tooltip
      </a>
    
  
</div>

它會將被加入sticky-top的目標，當你的畫面往下捲，要捲超過該區塊的時候，這個區塊會被固定在畫面上方。
以上這個範例，你就可以看到最上面的alert的className被加上sticky-top，當你的畫面往下滑的時候，這個區塊會被凍結在最上方。

sticky-top小技巧

另外，你可以注意到該被加入sticky-top的選項，他的css樣式，有特別加入top:10px，
為的是要讓當該選項的sticky-top效果觸發時，該選項會和網頁最上方保留10px的空間，視覺上比較舒服。

進階 Modal 使用，動態傳入參數

教導怎麼跳出相對應的Modal內容 和 怎麼按下按鈕就刪除該選項的功能。

加入相對應的參數

在Bootstrap的文件的Modal文件中，有一段內容叫Varying modal content
他就是教你怎麼做出跳出相對應內容的Modal的。

首先，先建立一個按鈕，並且按下他可以跳出相對應的Modal內容。
接著，上面這個範例中，我們為這個按鈕加上一個data-title的屬性，並將其屬性值設為”快速下單”，
這邊的data-title的title部分，你可以自己命名，這是自訂義的。

接著，我們在JavaScript部分，
寫入一些JQ的內容，
ex:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){

  $('#exampleModal').on('shown.bs.modal', function (event) {
    let button = $(event.relatedTarget); // Button that triggered the modal
    let title = button.data('title');
    let modal = $(this);
    modal.find('.modal-title').text(title);
  })
  
})

這個內容就是說，當Modal被觸發時，找到是哪個按鈕觸發他的，並找到該btn的data-title的值，
將該值存到title裡面，並將變數title的內容，去替換掉modal的.modal-title的內容。

data-backdrop=”static”

當我們再輸入跳出來的modal內的資料時，如果，不小心按到modal以外的區域，會直接讓modal跳出來，
這樣一來剛剛辛苦輸入的內容就都不見了。
所以，要防止這樣的情況，我們就需要用data-backdrop="static"的屬性，來防止這種問題的發生，
像是上面的範例，我們就都有在兩個modal的區塊的div裡面加上data-backdrop="static"的程式碼內容囉。