链接按钮(文本)旁边显示的基本简单模式弹出式Div(js脚本) [英] Basic simple modal Pop up Div (js script) that appears next to the link button (text)
问题描述
我去了很多站点，尝试了所有的站点，从ajax到javascript，jquery，都没有 甚至一个弹出窗口都可能很简单.它们中的大多数都具有带有颜色的效果和屏幕背景，仅此而已.
I went to many sites, tried all they had, from ajax to javascript, jquery and there is not even one pop up that could be simple. Most of them have effects and screen background with a color, nothing of that please.
- 需要一个简单的弹出框，其中包含文本和图像，紧接在链接文本旁边，没有效果，没有屏幕背景颜色.
- 使用文本作为按钮(例如>>更多内容"
- need is a simple pop up box that contains text and images,just next to the link text with no effects, no screen background color.
- Using text as a button (for example>> "Read More"
仅提供更多想法，您将找到一个图像示例.
Just to give more of an idea, you'll find an image example.
这是应该作为按钮的阅读更多"文本的代码.
Here is the code of the " read more " text that is supposed to be the button.
<a href="#"><p style="color: #282828 ;">Read More...</p></a>
如果有人能帮助我，我将深表感谢.请
I would deeply appreciate if someone can help me.Please
推荐答案
您是否检查了以下站点
添加此类代码以添加对您的Read Me...的点击
添加到自述文件中.
Add this kind of code to add a click on your Read Me...
Add to Read Me..
<a href="#" id="read_more_id_goes_here"><p style="color: #282828 ;">Read More...</p></a>
然后在页面的某处，我将在示例代码是样式表代码结束的地方添加此权限. (删除示例代码以打开对话框.并在下面将其替换为该代码)
Then somewhere in the page I'd add this right where the example code is where stylesheet code ends. (Removing the example code for opening the dialog. and replacing it with this below)
<script>
$( "#read_more_id_goes_here" ).click(function() {
$( "#dialog" ).dialog();
});
</script>
第一个示例的代码(似乎您需要什么)
Code for first example (seems what you need)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
CSS style.css文件:
CSS style.css File:
#dialog {
display: none;
}
.ui-dialog-title, .ui-dialog-content, .ui-widget-content {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
演示:
http://jsfiddle.net/Q9qt3/12/
这篇关于链接按钮(文本)旁边显示的基本简单模式弹出式Div(js脚本)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
