如何在弹出窗口或工具提示中显示自定义HTML
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在弹出窗口或工具提示中显示自定义HTML相关的知识,希望对你有一定的参考价值。
我想使用fullcalendar显示像Google Calendar这样的工具提示/弹出窗口。
每当用户点击日期单元格时,就会弹出一个屏幕,我想在其中显示自定义html / php代码。当用户输入值时,我想使用PHP将其保存在数据库中。
答案
我认为eventRender
回调更适合这个。
检查这个小提琴:http://jsfiddle.net/100thGear/h9cC6/
另一答案
我设法回答了我自己的问题。我在FullCalendar初始化中添加了以下内容:
select: function(start, end, allDay, jsEvent, view){
$('#addEvent').css({ left: jsEvent.pageX, top: jsEvent.pageY }).show("slow").fadeIn();
},
在该方法中,我使用隐藏的div,它存在于我的HTML中,如下所示:
<div id="addEvent" style="display: none; background-color:#F7F7F7;position: absolute; width: 300px; z-index: 1000;">
</div>
另一答案
您可以使用几个不同的库(例如http://www.jquerypopup.com/)。
然后使用这样的东西:
$(document).ready(function() {
//Change these values to style your modal popup
var align = 'center'; //Valid values; left, right, center
var top = 100; //Use an integer (in pixels)
var padding = 10; //Use an integer (in pixels)
var backgroundColor = '#FFFFFF'; //Use any hex code
var borderColor = '#000000'; //Use any hex code
var borderWeight = 4; //Use an integer (in pixels)
var borderRadius = 5; //Use an integer (in pixels)
var fadeOutTime = 300; //Use any integer, 0 = no fade
var disableColor = '#666666'; //Use any hex code
var disableOpacity = 40; //Valid range 0-100
var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page
//This method initialises the modal popup
$(".modal").click(function() {
var source = 'intro.php'; //Refer to any page on your server, external pages are not valid
var width = 500; //Use an integer (in pixels)
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method initialises the modal popup
$(".landscape").click(function() {
var source = 'lib/landscape.jpg'; //Refer to any page on your server, external pages are not valid
var width = 920; //Use an integer (in pixels)
var top = 10; //Use an integer (in pixels)
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
或者在没有插件的情况下使用此选项:How to generate a simple popup using jQuery
我发现jQuery Mobile插件非常有用:
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/
<script src="../../../js/jquery.mobile-1.2.0-alpha.1.js"></script>
<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
另一答案
看看我的小提琴链接FullCalendar with QTip
请参阅此FullCalendar Document eventRender
。下面是示例代码段。
即使趋势
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(event, element) {
element.qtip({
content: event.description
});
}
});
以上是关于如何在弹出窗口或工具提示中显示自定义HTML的主要内容,如果未能解决你的问题,请参考以下文章
用jquery代码如何实现当我点击“查看”按钮时,在弹出窗口或弹出页面,显示数据库的详细数据