JS彈出模態視窗下拉列表特效

阿新 • • 發佈：2019-01-18

或者掃描二維碼在手機體驗：

點選選擇城市後，在彈出的層中的輸入框，輸入英文字母 h,會有HoverTree和Hewenqi兩個選項，可以點選要輸入的項。

原始碼下載：http://hovertree.com/h/bjaf/95ese8s1.htm

歡迎關注微信公眾號何問起，賬號: ihewenqi

或者微信掃描下面二維碼關注：

程式碼如下：

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" 
 content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>JS點選彈出模態視窗下拉列表特效 - 何問起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/20/css/demo.css">
<style>
* {
padding: 0; 

margin: 0;
}

.content {
margin: 50px auto 0;
width: 300px;
min-height: 500px;
}

.form-group {
width: 100%;
float: left;
margin: 5px 0;
}

label {
margin-bottom: 10px;
float: left;
}

.field-input, select {
width: calc(100% - 20px);
float: left;
padding: 10px;
font-family: inherit;
}
</ 
style>

<!--必要樣式-->
<link rel="stylesheet" href="http://hovertree.com/texiao/js/20/css/pickout.css">

</head>
<body>
<div class="container">
<div class="content">
<form action="#" method="post">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" name="name" id="name" class="field-input" placeholder="何問起">
</div>
<div class="form-group">
<label for="city">城市:</label>
<select name="city" id="city" class="city pickout" placeholder="選擇一個城市">
<option data-icon="&spades;" value="bj">北京</option>
<option data-icon="&clubs;" value="sh">上海</option>
<option data-icon="&hearts;" value="gz">廣州</option>
<option selected data-icon="&diams;" value="sz">深圳</option>
<option data-icon="&#9786;" value="xg">香港</option>
<option data-icon="&#9792;" value="sjz">石家莊</option>
<option data-icon="&#9794;" value="cd">成都</option>
<option data-icon="&#x2605;" value="ht">HoverTree</option>
<option data-icon="&#x25C6;" value="ht">Hewenqi</option>
</select>
</div>
<div class="form-group">
<label for="name2">暱稱:</label>
<input type="text" name="name2" id="name2" class="field-input" placeholder="柯樂義">
</div>
<div class="form-group">
<label for="state">職位:</label>
<select name="state" id="state" class="state pickout" placeholder="選擇一個職位">
<option value="pe">專案經理</option>
<option value="pb">工程師</option>
<option value="ba">培訓師</option>
<option value="sp">專案策劃</option>
<option value="qd">前端開發</option>
</select>
</div>
</form>
</div>
</div>
<script src="http://hovertree.com/texiao/js/20/js/pickout.js"></script>
<script>

// Preparar o select
//pickout.to('.pickout');
pickout.to({
el: '.city',
theme: 'dark',
search: true
});

pickout.to({
el: '.state',
theme: 'clean',
});

// automaticamente
pickout.updated('.city');
</script>
</body>
</html>

JS彈出模態視窗下拉列表特效

或者掃描二維碼在手機體驗：點選選擇城市後，在彈出的層中的輸入框，輸入英文字母 h,會有HoverTree和Hewenqi兩個選項，可以點選要輸入的項。原始碼下載：http://hovertree.com/h/bjaf/95ese8s1.htm 歡迎關注微信公眾號何問起，賬號: ihewenqi 或者

使用js彈出模態視窗，提交儲存資料後關閉模態視窗，重新整理父視窗

首先，點選按鈕彈出模態視窗 <input type="button" value="修改個人資訊" onclick="modify();"/> function modify(){ var obj=window.showModalDial

javascript彈出模態視窗，獲取父頁面的元素

1、js彈出模態視窗的方法 window.showModalDialog(url,obj,feature) 說明：第二個引數代表父視窗，也就是第二個引數你可以傳一個window物件過去例如： window.showModalDialog("dialog.jsp",this

js實現兩個單選按鈕，選不同的選項彈出顯示不同的下拉框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

bootstrap模態框動態賦值， ajax非同步請求資料後給id為queryInfo的模態框賦值並彈出模態框（JS）

//查詢單個 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : "POST",

Qt在槽裡面彈出模態和非模態對話方塊

彈出模態對話方塊 1彈出Dialog以及Dialog子類 { //指不指定this都可以。沒有具體分析this和非this有什麼區別 HDialog hd(this);hd.exec(); } 2彈出widget 這裡new的widget如果指定th

bootstrap彈出模態框

（1）引入jquery, bootstrap相關的 jquery下載地址： https://jquery.com/download/ bootstrap下載地址： https://v3.bootcss.com/getting-started/#download 然後在head中引入： <

JQ處理刪除彈出模態框

在實際開發中，經常要求對於載入的表格資料進行刪除，點選刪除的時候彈出模態框。再到模態框上點確定刪除。實現這一套邏輯很多中方法，我經常用的一種：第一，頁面的資料表格是動態載入的 $("#table_result_per").append( "<tr>

點選按鈕彈出模態框實現

點選按鈕彈出模態框的實現： html： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

iOS開發中ViewController的頁面跳轉和彈出模態

ViewController 頁面跳轉從一個Controller跳轉到另一個Controller時，一般有以下2種： 1、利用UINavigationController，呼叫pushViewController，進行跳轉；這種採用壓棧和出棧的方式，進行Control

彈出式選單（下拉選單）實現——PopupMenu

PopupMenu代表彈出式選單，它會在指定元件上彈出PopupMenu，預設情況下，PopupMenu會顯示在該元件的下方或上方。PopupMenu可增加多個選單項，並可為選單項增加子選單。使用PopupMenu建立選單的步驟非常簡單，只要如下步驟即可。呼叫new PopupMenu(Context c

JQuery的Boxy彈出模態對話方塊，如何獲得頁面的返回值returnValue

JQuery很好用，現在想做個原來window.ShowModelDialog()的模態對話方塊，但是不知道如何像以前一樣獲得returnValue，請知道的給指點一二。用jq不可能實現~~ lz想要的是同步的返回結果,但是自己實現的對話方塊始終不是"模態對話方塊",

JS無重新整理二級聯動省市下拉列表

//if the province is a direct-managed city, like Beijing, shanghai, tianjin, chongqin,hongkong, macro

模態視窗（彈出框）整合CKEditor實戰

需求背景：電子合同專案下的合同模板新增頁面中是用layer.js實現的彈出框，也叫模態視窗，用之前的summernote文字編輯器不符合當前編輯合同文字內容的需求（1：字型大小2：字型顏色3：

bootstrap 彈出包含iframe模態視窗的修改

//彈出統計圖表方法 ///frameSrc:url地址，otitle：標題，cssobj：彈出框大小樣式設定預設800*620，cssifm:iframe樣式 function showtip(frameSrc,otitle,cssobj,cssifm){ $("#NoPermi

嘗試用React寫幾個通用組件 - 帶搜索功能的下拉列表，開關切換按鈕，彈出框

width isp 遮罩層 ogg 分享 ech 圖片 sch fig 嘗試用React寫幾個通用組件 - 帶搜索功能的下拉列表，開關切換按鈕，彈出框近期正在逐步摸索學習React的用法，嘗試著寫幾個通用型的組件，整體項目還是根據webpack+react+css-med

js彈出瀏覽器視窗，並指定瀏覽器彈出大小

<!-JavaScript開啟新的瀏覽器視窗，--> <!-window.open([URL],[視窗名稱],[引數字串])-> <!-URL：可選引數，在視窗中要顯示網頁的網址或路徑。如果省略這個引數，或者它的值是空字串，那麼視窗就不顯示任何文件。視窗名稱：可

chosen(下拉列表帶搜尋外掛)和layer(彈出框外掛)在一起使用會有衝突，解決辦法

可以選擇用window.open()和chosen外掛結合使用，這樣就不會有衝突。 chosen外掛的使用： 1、先把js和css檔案引用到網頁裡面去： <link href="js/jqueryUI/chosen/chosen.css" ty

基於bootstrap-dialog封裝下拉列表彈出層外掛

引入js檔案 jquery版本1.11.3，bootstrap3.x,第三個檔案為本文封裝的js <script src="/js/jquery-1.11.3.min.js"></script> <script src="

JS彈出框、對話方塊、提示框，JS關閉視窗、關閉頁面和JS控制頁面跳轉

1. RequestDispatcher.forward() 在伺服器端起作用,當使用forward()時,Servlet engine傳遞HTTP請求從當前的Servlet或者是JSP到另外的一個Servlet、JSP 或普通HTML檔案,也即你的form提交至a.jsp,在a.jsp用到了forw

JS彈出模態視窗下拉列表特效

相關推薦