Flask實戰第50天：cms添加輪播圖的模態對話框制作

編輯cms_banners.html, 在{% block main_content%}中加上表給內容如下

{% block main_content %}
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>名稱</th>
                    <th>圖片鏈接</th>
                    <th>跳轉鏈接</th>
                    <th>優先級</th>
                    <th>創建時間</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>11</td>
                    <td><a href="#" target="_blank">測試數據</a></td>
                    <td><a href="#" target="_blank">測試數據</a></td>
                    <td>測試數據</td>
                    <td>測試數據</td>
                    <td>
                        <button class="btn btn-default btn-xs edit-banner-btn">編輯</button>
                        <button class="btn btn-danger btn-xs delete-banner-btn">刪除</button>
                    </td>
                </tr>
            </tbody>
        </table>
{% endblock %}

然后我們需要在表格上面添加一個"添加輪播圖"按鈕

{% block head %}
    <style>
        .top-box button{
            float: right;
        }

        .top-box{
            overflow: hidden;
            background: #ecedf0;
            padding: 10px;
        }
    </style>
{% endblock %}

{% block main_content %}
    <div class="top-box">
        <button class="btn btn-warning" >添加輪播圖</button>
    </div>
{% endblock %}

.去boostrap v3中文站找到模態框的示例代碼，拿來復制到{% block main_content%}中的下面，把自帶的按鈕去掉，文件換成中文如下：

然后在輪播圖按鈕那里加上data-toggle和data-target, data-targer配置的是模塊框中的id

<button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">添加輪播圖</button>

這樣，當我們點擊添加輪播圖，就會彈出模態框了

 然后在模態框“model-body“”加上表單

<form action="" class="form-horizontal">
  <div class="form-group">
      <label class="col-sm-2 control-label">名稱：</label>
      <div class="col-sm-10">
          <input type="text" class="form-control" name="name" placeholder="輪播圖名稱">
      </div>
  </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">圖片：</label>
      <div class="col-sm-7">
          <input type="text" class="form-control" name="image_url" placeholder="輪播圖圖片">
      </div>
      <button class="btn btn-info col-sm-2" id="upload-btn">添加圖片</button>
  </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">跳轉：</label>
      <div class="col-sm-10">
          <input type="text" class="form-control" name="link_url" placeholder="跳轉鏈接">
      </div>
  </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">權重：</label>
      <div class="col-sm-10">
          <input type="number" class="form-control" name="priority" placeholder="優先級">
      </div>
  </div>
</form>