JQuery插件simplemodal-basic弹出层的使用

simplemodal官方地址:http://www.ericmmartin.com/projects/simplemodal/,下面是我测试的一个简单弹出层,在项目开发中,操作消息提示使用alert始终不好,所以找了这个插件来取代alert,在此将官方源码整理一下

下载源码后将basic\js\jquery.simplemodal.js(jquery本身js文件随便拷贝一个就行,我用的是VS10中自带的1.4)、basic\img\basic\x.png和basic\css\basic.css文件拷到项目下

文件头部引用:

<link href="css/basic.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.simplemodal.js" type="text/javascript"></script>

在页面放一个Button控件:

<input type='button' name='basic' id="basic" value='测试' class='basic'/>

cs文件中:

ClientScript.RegisterStartupScript(this.GetType(), "", "<div id='content'>这里是弹出层的内容</div><script type='text/javascript'>$(function () { $('#basic').click(function (e) { $('#content').modal(); return false; }) })</script>");


我是直接在后台注册个脚本事件,因为我感觉这样比较实用,这样简单的弹出层也是用来提示操作消息的,直接alert()很黄很暴力,之前老大跟我说,直接alert浏览器会有声音的,囧~

你可能感兴趣的:(jquery插件)