在深色页面上显示模态 DIV答案

【问题标题】：Display modal DIV over darkened page在深色页面上显示模态 DIV
【发布时间】：2013-03-17 16:36:41
【问题描述】：

我有一个用户填写表格的页面。多个文本框、下拉菜单和复选框等。

当用户单击页面中的特定文本框时，我需要使屏幕变暗并弹出一个对话框，其中包含复选框列表以及确定和取消按钮。当用户单击确定时，它将从选中的复选框中获取文本值，关闭弹出窗口，再次点亮主页并将复选框文本以逗号分隔的字符串格式写入被单击的文本框。

我遇到的最大问题是模式弹出 div 代码。我确信我可以很好地弄清楚复选框/文本框的功能，但我一直无法让弹出窗口正常工作。

有没有人有任何简单的方法来做到这一点？目前，在我开始搞砸之前，我只有一个包含所有输入控件的简单表单。

【问题讨论】：

你在使用 jQuery UI 吗？
是的，我在这个项目中使用了 JQuery。
jQuery UI 是一个基于 jQuery 的库。不确定这是否是您的意思。它有一个模态对话框。如果您希望人们提供帮助，请发布您拥有的任何代码，即使它不起作用。

标签： javascript jquery asp.net css

【解决方案1】：

最简单的方法是使用 jQuery UI。它有一个“对话框”界面，非常方便且易于实现。

另一方面，如果您更愿意手动操作，那就另当别论了：

创建一个 DIV，它只是一个覆盖页面的黑色固定框（位置：固定）。这将是你的背景。确保它一开始不可见（设置显示：无）
制作另一个固定的 DIV 以显示您的对话框。设置它的样式，以便您的对话框将显示在浏览器窗口的中心。
使用 Javascript（或 jQuery 获得额外效果），使您的黑色 DIV 和对话框 DIV 在您的按钮被点击时同时出现。

【讨论】：

【解决方案2】：

使用模态对话框，如图here：

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/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.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
  resizable: false,
  height:140,
  modal: true,
  buttons: {
    "Delete all items": function() {
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});
});
</script>
</head>
<body>

<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;">    
</span>These items will be permanently deleted and cannot be recovered. Are you sure?   </p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>

【讨论】：

谢谢，效果很好！现在如何根据选中的复选框文本设置“确定”按钮以将数据写入单击的文本框？
喜欢这个jsfiddle.net/Cyberjetx/QGuz8部分答案来自stackoverflow.com/questions/786142/…

【解决方案3】：

您可能不想仅仅为了这个目的而添加整个 jquery ui 库。如果我在这里，你会怎么做。

因此，当您“聚焦”该输入时——我们称之为“opensModal”——您希望打开模式。它非常简单，而且不言自明——尽管代码很“长”。实际上，其中大部分只是为了使模态/模态外观更漂亮。我们开始：

HTML：

<!-- the input -->
<input class="opensModal" type="text" />

<!-- the modal and its overlay -->
<div class="modalOverlay is-inactive">
    <div class="modal">
        <input type="checkbox" />
        <input type="checkbox" />
        <button>Ok</button>
        <button>Cancel</button>
    </div>
</div>

CSS：

.modalOverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: 0.6s;
}

.modalOverlay.is-inactive {
    visibility: hidden;
    background: rgba(0, 0, 0, 0);
}

.modalOverlay.is-active {
    visibility: visible;
    background: rgba(0, 0, 0, 0.4);
}

.modal {
    margin: 100px auto;
    background: #fff;
    width: 100px;
    padding: 20px;
    -webkit-transition: 0.4s 0.6s;
}

.modalOverlay.is-inactive .modal {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.1);
}

.modalOverlay.is-active .modal {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
}

JQUERY(javascript)

(function () {
    var $modal = $('.modalOverlay'),
        openModal = function () {
           $modal
               .removeClass('is-inactive')
               .addClass('is-active');
        },
        closeModal = function () { //use it wherever you want
            $modal
               .removeClass('is-active')
               .addClass('is-inactive');
        },
        onDocReady = function () {
            $('.opensModal').on('focus', openModal);
        };

    $(onDocReady);
})();

这是一个小提琴：http://jsfiddle.net/2edPZ/3/

【讨论】：