整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<style>
li {
list-style: none;
}
.modal-li li {
height: 45px;
line-height: 45px;
}
.text-input {
display: inline-block;
width: 80%;
margin-left: 10px;
}
</style>
</head>
<body>
<!--主頁面數據 start-->
<div style="margin:50px;">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>編號</th>
<th>性別</th>
<th>修改</th>
</tr>
</thead>
<tbody>
<tr>
<td>龍徹</td>
<td>20160621</td>
<td>男</td>
<td style="color:#f00;cursor:pointer;" onclick="editInfo(this)">修改</td>
</tr>
<tr>
<td>Sachin</td>
<td>20160621111</td>
<td>女</td>
<td style="color:#f00;cursor:pointer;" onclick="editInfo(this)">修改</td>
</tr>
<tr>
<td>Uma</td>
<td>23341</td>
<td>男</td>
<td style="color:#f00;cursor:pointer;" onclick="editInfo(this)">修改</td>
</tr>
</tbody>
</table>
</div>
<!--主頁面數據 start-->
<!--模態窗口 -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">模態窗口</h4>
</div>
<div class="modal-body modal-li">
<form>
<ul>
<li>
<label for="name">姓名</label>
<input type="text" class="form-control text-input" id="name" placeholder="請輸入姓名">
</li>
<li>
<label for="name">編號</label>
<input type="text" class="form-control text-input" id="number" placeholder="請輸入編號">
</li>
<li>
<label for="name">性別</label>
<input type="radio" name="sex" id="man" value="男" style="margin-left:10px;"/>男
<input type="radio" name="sex" id="women" value="女" style="margin-left:10px;"/>女
</li>
</ul>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" onclick="update()">保存</button>
</div>
</div>
</div>
</div>
<!--end-模態窗口 -->
<script src='js/jquery-1.10.2.min.js'></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
s:
bootstrap框架中，使用模態框（modal）的彈窗組件需要三層 div 容器元素，分別為：
1. 外層：modal（模態聲明層）。
2. 中間層：dialog（窗口聲明層）。
3. 內層：content（內容層）。在內容層里面，還包含三層，分別為 header(頭部)、body(主體)、footer(注腳)。
案例效果如下：
說明：案例中設置按鈕的數據切換方式（data-toggle）是modal，數據目標（data-target）指向模態框的id（mod1）。
網頁文件modal.html的代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>模態框插件</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
font-size:14px;
}
</style>
</head>
<body>
<!--tabindex="-1"表示關閉焦點，使得按esc鍵也可以關閉打開的對話框 -->
<div class="modal fade" id="mod1" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">用戶登陸</h4>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">用戶名：</span>
<input type="text" class="form-control" placeholder="請輸入用戶名">
</div>
<p></p>
<div class="input-group">
<span class="input-group-addon">密 碼：</span>
<input type="password" class="form-control" placeholder="請輸入密碼">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">注冊</button>
<button class="btn btn-primary">登陸</button>
</div>
</div>
</div>
</div>
<hr>
<button class="btn btn-primary" data-toggle="modal" data-target="#mod1">用戶登陸</button>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
至此，案例制作完成。
為美工詳情頁增加模態框效果，可以采用以下步驟和技巧：
通過以上步驟和技巧，你可以成功為美工詳情頁設計增加模態框效果。模態框可以提供一種交互式和聚焦式的用戶體驗，增加頁面的互動性和吸引力。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
