javascript 出现在链接按钮（文本）旁边的基本简单模态弹出 Div（js 脚本）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21056113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Basic simple modal Pop up Div (js script) that appears next to the link button (text)
提问by Sol
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.
我去了很多网站，尝试了所有的网站，从 ajax 到 javascript、jquery，甚至没有一个简单的弹出窗口。他们中的大多数都有效果和带有颜色的屏幕背景，请不要这样做。
- need is a simple pop up boxthat 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
如果有人可以帮助我，我将不胜感激。请
采纳答案by SSpoke
Have you checked the site below
你检查过下面的网站吗
Add this kind of code to add a click on your Read Me...Add to Read Me..
添加此类代码以添加单击“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.cssFile:
CSSstyle.css文件：
#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%;
}
