Question

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

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

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

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

Answer 1

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

如果另一方面你宁愿手工做，那么这是一个不同的故事：

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

Answer 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>

Answer 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/

在黑暗的页面上显示模态DIV

3 个答案: