JQuery,UIbootstrap风格弹出层
2016-07-04 10:21
387 查看
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../Resources/css/bootstrap.min.css" rel="stylesheet" />
<link href="../Resources/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
<script src="../Resources/javascripts/jquery-1.10.2.min.js"></script>
<script src="../Resources/javascripts/bootstrap.min.js"></script>
<script src="../Resources/jquery-ui-bootstrap/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
$(function () {
// Dialog
$('#dialog_simple').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$('#dialog_link').click(function () {
$('#dialog_simple').dialog('open');
return false;
});
//========
//重复时提醒
$("#dialog-message").dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
$("#dialog-message").dialog('open');
});
</script>
</head>
<body>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog
</a>
<div id="dialog_simple" title="Dialog Simple Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="dialog-message" title="Dialog Simple Title">
<p>提示错误</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../Resources/css/bootstrap.min.css" rel="stylesheet" />
<link href="../Resources/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
<script src="../Resources/javascripts/jquery-1.10.2.min.js"></script>
<script src="../Resources/javascripts/bootstrap.min.js"></script>
<script src="../Resources/jquery-ui-bootstrap/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
$(function () {
// Dialog
$('#dialog_simple').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$('#dialog_link').click(function () {
$('#dialog_simple').dialog('open');
return false;
});
//========
//重复时提醒
$("#dialog-message").dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
$("#dialog-message").dialog('open');
});
</script>
</head>
<body>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog
</a>
<div id="dialog_simple" title="Dialog Simple Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="dialog-message" title="Dialog Simple Title">
<p>提示错误</p>
</div>
</body>
</html>
相关文章推荐
- Bootstrap表单布局样式源代码
- Bootstrap实现水平排列的表单
- 使用jQuery获取Bootstrap Switch的值
- bootstrap表格
- 酒店管理系统_01_Servlet版本-项目搭建(引入Bootstrap)
- bootstrap
- 基于Bootstrap框架的图片轮播实现
- bootstrap布局和标签
- Bootstrap基础
- bootstrap搜索框样式代码及效果
- Bootstrap table使用心得
- Bootstrap学习心得
- 学习Bootstrap滚动监听 附调用方法
- 关于bootstrap--表单(按钮<button>效果、大小、禁用)
- 关于bootstrap--表单控件(disabled表单禁用、显示表单验证的样式)
- BootStrap
- 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)
- 很棒的Bootstrap选项卡切换效果
- mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理
- Bootstrap实现遮罩层