如何使JS/Jquery Css和HTML弹出
How to make JS/Jquery Css and HTML popup
我正在尝试制作一个html、css和JS/jquery弹出窗口。我希望它是一个按钮，当它被点击时，显示一个div标记，也可以关闭。如果有人能尽快发布答案，那将是非常有帮助的。提前感谢！
好的，提供的样式应该使窗口看起来像facebooks样式。我刚刚从我正在做的一个项目中复制了它。
html也被复制，基本上点击链接，它会在jquery对话框中显示div。
记得链接到jquery文件，我还没有包括这些文件。
我希望这能有所帮助。
/*文档：fbdialog创建日期：2013年7月29日下午7:33:42作者：丹尼说明：样式表的用途如下。*/
/* Facebook Dialogue Styles */
.ui-widget-overlay {
background:url(images/overlay.png) repeat 0 0;
}
.ui-dialog {
background:rgba(82,82,82,0.7);
border-radius:8px;
-webkit-border-radius:8px;
padding:10px;
}
.ui-dialog .ui-dialog-titlebar {
background:#6D84B4;
border:1px solid #3B5998;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
color:#FFF;
font-size:14px;
font-weight:700;
padding:5px;
}
.fb-dialogue {
border-left:1px solid #555;
border-right:1px solid #555;
border-bottom:1px solid #CCC;
background-color:#FFF;
overflow:hidden;
display:none;
padding:0;
}
.fb-dialogue p,.fb-dialogue div {
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:13px;
}
.ui-widget-content {
padding-top: 15px;
background:none none 50% top repeat-x;
}
.ui-dialog-titlebar-close {
display:none;
}
.ui-dialog .ui-corner-all {
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
}
.ui-dialog .ui-dialog-buttonpane {
background:#F2F2F2;
border-left:1px solid #555;
border-right:1px solid #555;
border-bottom:1px solid #555;
margin:0;
padding-top: 10px;
padding-bottom: 40px;
padding-right: 15px;
}
.ui-dialog .ui-dialog-buttonpane button {
margin:0px;
padding:4px 12px;
float: right;
}
.ui-state-default,.ui-widget-content .ui-state-default {
color:#FFF;
background:#6D84B4;
border-color:#29447E;
}
.ui-state-hover,.ui-widget-content .ui-state-hover {
background:#6D84B4;
border-color:#29447E;
}
.ui-state-active,.ui-widget-content .ui-state-active {
background:#4F6AA3;
border-bottom-color:#29447E;
box-shadow:0 1px 0 rgba(0,0,0,.05);
-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.ui-button-text-only .ui-button-text {
padding:2;
}
</style>
<a class="open-event" id="pbutton" href="javascript:void(null);" onclick="showDetailsDialog();">Click Here</a>
<div id="confirmDialog" class="fb-dialogue" >
<p>
Here is the text of your div window!
</p>
</br>
</div>
<script type="text/javascript">
function showDetailsDialog() {
$("#confirmDialog").dialog({
title: "Signup Confirmation",
resizable: true,
width: 400,
position: ['50%',300],
draggable: true,
buttons: {
"Confirm": function () {
$('#confirmDialog').dialog('close');
},
}
});
});
</script>
<div id="confirmDialog" class="fb-dialogue" >
<p>
Here is the text of your div window!
</p>
</br>
</div>
如果您所说的弹出窗口是指工具提示，那么我使用过JqueryUI框架totoltip的几个插件，比如这个。
http://jquerytools.org/demos/tooltip/any-html.html
如果您正在寻找更多的弹出窗口，只需创建一个单独的页面并使用Javascript window.open.
我使用JQuery Confirm请查看此处的文档。它很容易实现。您将需要Bootstrap、Jquery和confirmJS。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Demo of jquery.confirm with Bootstrap 3</title>
<!--bootstrap-->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<!--JQuery-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--confirm-js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Demo</h1>
</div>
<table class="table">
<thead>
<tr>
<th class="col-lg-3"></th>
<th class="col-lg-1">Demo</th>
<th class="col-lg-8">Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Confirmation dialog customized with JS:</td>
<td><button class="btn btn-primary" id="complexConfirm">Click me</button></td>
<td>
<pre><button class="btn btn-primary" id="complexConfirm">Click me</button></pre>
<pre class="prettyprint"><code>$("#complexConfirm").confirm({
title:"Delete confirmation",
text:"This is very dangerous, you shouldn't do it! Are you really really sure?",
confirm: function(button) {
alert("You just confirmed.");
},
cancel: function(button) {
alert("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});</code></pre>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$("#complexConfirm").confirm({
title: 'Confirm!',
content: 'Simple confirm!',
theme: 'supervan', // 'material', 'bootstrap'
backgroundDismiss: false,
backgroundDismissAnimation: 'glow',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-primary',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
</script>
</div>
<!--bootstrap-->
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>相关文章：
- 将内容ajax加载到html弹出窗口中
- 为什么我的html弹出窗口显示我的函数的文本，而不是运行它们
- 如何在带有复选框按钮的 HTML 弹出窗口中显示结果
- 如何在 html 弹出窗口中显示联系人表单
- 我可以创建一个不使用Javascript的HTML弹出窗口吗?或者我可以把Javascript放到<正文>部分
- 如何单击图像使其放大HTML弹出窗口
- HTML 弹出窗口，其中包含表单提交的链接
- 如何使JS/Jquery Css和HTML弹出
- Javascript:在HTML弹出窗口中引用href位置
- 使用javascript打印html弹出窗口
- 如何使用验证码在我的HTML弹出窗口
- 创建一个可以在许多网站上访问的HTML弹出式表单
- 如何使用Javascript将现有的html弹出框转换为模态弹出框
- 在javascript函数中调用html弹出
- 消除HTML弹出窗口的延迟
- 使用AJAX显示HTML弹出窗口
- 从javascript浏览器警报更改为html弹出窗口
- HTML弹出分区到任何屏幕分辨率的屏幕中心
- 在HTML弹出窗口上执行fetch查询
- 点击WordPress内的HTML弹出
