Question

我去了很多网站，尝试过所有的网站，从ajax到javascript，jquery，但没有甚至一个可能很简单的弹出窗口。他们中的大多数都有效果和屏幕背景颜色，请不要这样。

需要一个简单弹出框，其中包含文字和图片，旁边没有效果，没有屏幕背景颜色的链接文字。
使用文字作为按钮（例如＆gt;＆gt;“阅读更多”

只是为了给出更多想法，你会找到一个图像示例。

以下是应该是按钮的“阅读更多”文本的代码。

<a href="#"><p style="color: #282828 ;">Read More...</p></a>

如果有人可以帮助我，我会非常感激。请

Answer 1

您是否检查过以下网站

jQuery UI

添加此类代码，为Read Me...添加点击加入阅读我..

<a href="#" id="read_more_id_goes_here"><p style="color: #282828 ;">Read More...</p></a>

然后在页面的某个地方，我会将示例代码添加到样式表代码结束的位置。（删除用于打开对话框的示例代码。并将其替换为以下内容）

<script>
$( "#read_more_id_goes_here" ).click(function() {
  $( "#dialog" ).dialog();
});
</script>

第一个例子的代码（似乎你需要的）

<!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文件：

#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脚本）出现在链接按钮旁边（文本）

1 个答案: