5

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

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

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

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

4

3 回答 3

3

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

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

  • 创建一个 DIV，它只是一个覆盖页面的黑色固定框（位置：固定）。这将是你的背景。确保它一开始不可见（设置显示：无）

  • 制作另一个将显示您的对话框的固定 DIV。设置它的样式，以便您的对话框将显示在浏览器窗口的中心。

  • 使用 Javascript（或 jQuery 以获得额外效果），当您的按钮被点击时，让您的黑色 DIV 和对话框 DIV 都出现。

于 2013-03-27T14:48:42.423 回答
0

使用如下所示的模态对话框：

<!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>
于 2013-03-27T14:55:18.550 回答
0

您可能不想仅仅为了这个目的而添加整个 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);
}

查询（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/

于 2013-03-27T14:55:53.587 回答