如何禁用jQuery简单模态弹出插件的叠加层？

Question

我在使用插件 simple modal 在我的网站上展示弹出框。我需要禁用与弹出框一起显示的叠加层。有什么解决方法吗？感谢任何帮助。

- Sandeep

---

如果您不需要叠加效果，为什么要使用这个插件呢？为什么不直接使用HTML/CSS呢？ - ant

如果您没有禁用它的选项，那么您可以添加代码，在调用该插件后删除它。检查遮罩层具有什么ID或类（在检查器中），然后执行 $('.<遮罩层类>').remove();。您也可以编辑插件并删除遮罩层。 - jcubic

Answer 1

在你的css文件中添加以下内容，它会隐藏覆盖层。

#simplemodal-overlay{
   display: none !important;
}

为确保它始终可用，对于您网站中的所有simplemodal，请将overlayId添加到simplemodal-overlay。例如：

$("#element-id").modal({
    overlayId : 'simplemodal-overlay'
});

那么覆盖层的id将永远是simplemodal-overlay并且上述css将适用于所有情况。

- Prasenjit Kumar Nag

---

你的解决方案非常好，但我用jQuery管理了它，这就是为什么我将其标记为我的答案。非常感谢你的帮助。 - Sandeep

Answer 2

编辑：

// Change overlay color and opacity
$("#sample").modal({
opacity:0,
overlayCss: {backgroundColor:"#fff"}
});

摘自: http://www.ericmmartin.com/projects/simplemodal/

演示请看: http://jsfiddle.net/rathoreahsan/CzPQG/

$('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal();        
    $('#simplemodal-overlay').css('display','none'); /* Overlay Div's display = none */
    return false;
});

See Demo: http://jsfiddle.net/rathoreahsan/Q2LHW/

- Ahsan Rathod

---

@Ahsan 感谢您的回答。但在我的情况下，即使弹出窗口存在，用户也需要与网站进行交互。 - Sandeep

如果 $('#simplemodal-overlay').css('display','none');，用户可以与第二个演示互动。 - Ahsan Rathod

Answer 3

尝试 -

$('#simplemodal-overlay').hide();

- Dipak

Answer 4

禁用覆盖层将破坏使用模态窗口/对话框的目的。无论如何，您可以将不透明度选项设置为0。

- slash197

---

这个问题最好还是有争议的。在我们的项目中，有几种情况需要对话框（而不是模态对话框），让它后面的页面保持活动状态以允许用户与之交互。将不透明度设置为0将无法实现这一点。 - Nope

然后使用jQuery的对话框，该对话框具有设置模态为true或false的选项。 - slash197

是的，jQuery对话框有预配置选项，但CSS也可以修复它。我认为，在告诉公司你想改变技术之前，尝试使用给定的技术实现你所需的功能是明智的，因为你需要使用这个技术编写自定义CSS。谁知道，也许当前的技术有使用要求，而jQuery对话框无法满足。更改技术并不总是最好的选择，也不应该是仓促的决定。 - Nope