个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 SimpleModal 对话框，并且在页面内我希望有模式对话框来设置对话框的高度以在没有滚动条的情况下呈现内容。
在测试页面中，我使用以下代码:我插入了一堆额外的段落标签来表示更像表单布局。该对话框不需要超过屏幕的高度，但我希望该对话框能够扩展到屏幕的最大高度，然后在必要时滚动。
我尝试使用 maxHeight 作为模式窗口中的选项，但 css 继续恢复为 DOM 内的内联固定高度和宽度。
<link href="Styles/basic.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/jquery-1.7.js" type="text/javascript" ></script>
<script src="js/jquery.simplemodal-1.4.2.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
$("#basic-modal").click(function (e) {
$('#basic-modal-content').modal({ minHeight: 500, minWidth: 400, overlayClose: false});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<asp:TextBox Width="300" BorderColor="Black" BorderWidth="1px" Height="32px" Font-Size="1.1em"
runat="server" /><br />
<br />
<a href="#" id="basic-modal">
Click to open Modal window</a>
</div>
<div id="basic-modal-content">
<h3>
Basic Modal Dialog</h3>
<p>
For this demo, SimpleModal is using this "hidden" data for its content. You can
also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
<p>
Examples:</p>
**... removed for brevity this consisted of additional html content to invoke a scroll**
</div>
在阅读 Eric Martins 网站的文档时，我看到了内容恢复到溢出的引用。
SimpleModal internally defines the following CSS classes: simplemodal-overlay, simplemodal-container, simplemodal-wrap (SimpleModal will automatically set the overflow to auto if the content gets larger than the container), and simplemodal-data.
我在 CSS 中看到以下样式:
#simplemodal-overlay {background-color:#000; }
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
我未能成功地根据 basic-modal-content div 容器中的内容(高于我当前传递的 400 分钟高度值)来扩展/缩放模态窗口。
我是否需要修改简单的模态 js 文件(这似乎不正确)，或者是否有一个选项可以在我缺少的模态函数中传递。
问题更新
在进一步处理这个问题时，我已经能够通过使用 simpleModal js 文件中指定的 dataCss 和 containerCss 来覆盖宽度和高度。我的通话现在如下所示:
$(function () {
$("#basic-modal").click(function (e) {
$('#basic-modal-content').modal({ dataCss: { height: "95%", width: "95%" }, containerCSS: { height: "95%", width: "95%" }, overlayClose: false });
return false;
});
});
这似乎有效或至少完成了我正在尝试的事情。
但是，如果有更好的方法，我将不胜感激任何其他建议或指导
谢谢，
最佳答案
只需删除任何宽度或高度属性(css 和 js)。这样，简单模态将完美地适合您的隐藏标记。
关于jquery - 如何根据呈现的内容调整 SimpleModal 对话框的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8715349/
25
4
0
我们的 simplemodal alert div 需要可打印。在大多数情况下，内容本身应该适合页面，但我无法覆盖打印 css 中的定位以使其在打印时顶部/左侧齐平，以避免右侧被切断。 似乎我可以在我
我仍然是 jquery 的相对初学者，因此非常感谢任何帮助。 我使用 simplemodal 函数并将定位从固定更改为绝对，因为我希望模态框能够随背景页面一起滚动。 这给我带来了一个问题，因为某处(我
我用过SimpleModal 。现在的问题是模式对话框的大小调整。我有一个确认对话框，按"is"后它基本上很小。 第二个是my.php，它包含大量数据。我正在使用的概念附加一个已经存在的模型。如何调整
我在页面上滚动内容超过 2000 像素。 如果用户单击div，则会在简单模式窗口中弹出滚动内容。现在我的客户希望在模式窗口打开时使原始页面不可滚动。 (当然，模式应该仍然是可滚动的。) 这可能吗？ 编
我正在使用 simplemodal 在我的页面上弹出一个模式。我使用 display:none 隐藏页面加载时的模式内容。我已经正确设置了 simplemodal-container 的样式，并且弹出
我正在尝试使用 jQuery SimpleModal确认提交表单时显示“是/否”确认。 我修改了 demo here (列表中的最后一个)如下所示，捕获并阻止表单提交。 但是，这似乎仅适用于 jQue
我对 jQuery 很陌生。我有一个关于 SimpleModal 的问题。 我试图关闭带有动画效果的弹出窗口，但失败了。 这是我的代码。 $('#btnClose').click(function(
我正在使用 jquery simplemodal 插件，但我不确定使用此插件是否可以从另一个 simplemodal 对话框打开 simplemodal 对话框。有人知道这可能吗？ 谢谢 卢西奥 最佳
好的，所以所有模态框的右上角都已经有一个图像来关闭它们。我怎样才能另外制作另一个 anchor 来做同样的事情？我认为我可以使用默认为“simplemodal-close”的“closeClass”选
我有一个非常基本的问题，我在使用 jQuery simplemodal 时无法弄清楚:http://www.ericmmartin.com/projects/simplemodal/ 这里有一个 js
您好: 我打算使用 rel 属性打开几个对话框。我知道我遗漏了一些非常基本的东西，但我就是无法关闭它......(这个系统只允许我使用 2 个“a”标签，所以我用“alink”链接......它真的是
我正在编写一个小网页，我想在加载页面时启动 simplemodal。 现在我在正文中有这段代码
我正在尝试使用 SimpleModal 作为电子邮件免责声明的确认，即单击电子邮件地址会弹出模式，同意免责声明的用户可以使用 mailto: 方法发送电子邮件，拒绝的用户不会收到弹出窗口。 我在一个页
我有一个模态，看起来像我想要的，当它第一次加载时。要设置我正在使用的 onShow 回调中的大小和位置: $j('.discount-msg').click(function () { eve
我正在使用 SimpleModal 基本模态对话框，当我尝试在更改跳转菜单时实现模态窗口弹出时，对话框会打开，但我很快就会重定向到一个不存在的 URL。 如何防止这种情况发生？ 这是我的跳转菜单的 H
我使用简单模式在用户向特定地址发送电子邮件之前显示法律警报: 在我的主页上: somebody@abc.com 正在使用 jQuery: jQuery(function ($) { $('.l
我有一个简单模式的 jquery 弹出窗口，它必须将溢出设置为自动，因为结果列表可能很长。滚动条显示正常，但关闭图像被推到垂直滚动条和简单模式边框后面。如果我注释掉 overflow: 'auto',
我正在使用 SimpleModal ( http://www.ericmmartin.com/projects/simplemodal/ )，并且我有一个显示在对话框中的表单。我想要做的是每次用户尝试
请考虑以下代码(也在 this fiddle 中): var viewModel = { count:ko.observable(0), add:function (){ th
所以我四处搜索，我找不到明确的答案。我希望我的 iframe 有一个关闭按钮，以便用户可以单击它而不是使用 ESC 键关闭 SimpleModal 容器。 我已经尝试了几件事，但似乎没有任何东西被传递
我是一名优秀的程序员,十分优秀！