jQuery點擊按鈕調用提示框代碼



122 486 163



特效描述:jQuery 點擊按鈕 調用提示框代碼,jQuery點擊按鈕調用提示框代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/message.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/message.js"></script>

3. HTML代碼

<div class="p40">
	<p>點擊調用提示</p>
	<button class="btn btn-success">成功提示</button>
	<button class="btn btn-danger">失敗提示</button>
	<button class="btn btn-warning">警告提示</button>
	<button class="btn btn-info">信息提醒</button>
</div>
<div class="p40">
<p>調用方式:</p>
<pre>
$('.btn-success').on('click',function(){
    $.message('成功');
})
$('.btn-danger').on('click',function(){
    $.message({
        message:'失敗提示',
        type:'error'
    });
})
$('.btn-warning').on('click',function(){
    $.message({
        message:'警告提示',
        type:'warning'
    });
})
$('.btn-info').on('click',function(){
    $.message({
        message:'信息提醒',
        type:'info'
    });
})
 </pre>
            <p class="mt20">參數詳解:</p>
<pre>
message:' 操作成功',    //提示信息
time:'2000',           //顯示時間(默認:2s)
type:'success',        //顯示類型,包括4種:success.error,info,warning
showClose:false,       //顯示關閉按鈕(默認:否)
autoClose:true,        //是否自動關閉(默認:是)
</pre>
        </div>
<script>
$(function(){
	$('.btn-success').on('click',function(){
		$.message('成功');
	})
	$('.btn-danger').on('click',function(){
		$.message({
			message:'失敗提示',
			type:'error'
		});
	})
	$('.btn-warning').on('click',function(){
		$.message({
			message:'警告提示',
			type:'warning'
		});
	})
	$('.btn-info').on('click',function(){
		$.message({
			message:'信息提醒',
			type:'info'
		});
	})
})
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字提示框 提示文字 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子