我正在尝试制作一个 html、css 和 JS/jquery 弹出窗口。我希望它是一个按钮，当它被点击时，会显示一个也可以关闭的 div 标签。如果有人可以尽快发布答案，那将非常有帮助。提前致谢！
问问题
440 次
3 回答
1
好的，提供的样式应该将窗口样式设置为看起来像 facebooks 样式。我只是从我正在处理的项目中复制它。
html 也被复制，基本上点击链接，它将在 jquery 对话框中显示 div。
请记住链接到我没有包含的 jquery 文件。
我希望这有帮助。
/* 文档：fbdialog 创建于：2013 年 7 月 29 日，下午 7:33:42 作者：danny 描述：样式表的目的如下。*/
/* 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>
于 2013-08-04T22:03:33.093 回答
0
如果您所说的弹出窗口是指工具提示，那么我使用的 JqueryUI 框架 totoltip 有几个插件，例如这个。
http://jquerytools.org/demos/tooltip/any-html.html
如果您正在寻找更多的弹出窗口，只需创建一个单独的页面并使用 Javascript window.open。
于 2013-08-04T21:51:02.633 回答
0
我使用JQuery Confirm 检查文档here。这很容易实现。您将需要 Bootstrap、Jquery 和 Confirm-JS。
<!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>于 2017-02-16T03:17:35.407 回答