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

我有一个用户填写表单的页面。多个文本框，下拉列表和复选框等在黑暗的页面上显示模态DIV

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

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

有没有人有这样做的什么简单的办法？目前，在我开始处理这个问题之前，我只需要一个包含所有输入控件的简单表单。

来源

2013-03-27 Mark Highfield

你使用jQuery UI ？ – 2013-03-27 14:35:56

是的，我在这个项目中使用JQuery。 – 2013-03-27 14:42:45

[jQuery UI]（http://jqueryui.com）是一个位于jQuery之上的库。不知道这是你的意思还是不在那里。它有一个模态对话框。发布你所拥有的任何代码，即使它不起作用，如果你希望人们提供帮助。 – 2013-03-27 14:50:03

使用模态对话框，如图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>

来源

2013-03-27 14:55:18

谢谢，这很好！现在，如何根据选中的复选框文本设置“确定”按钮，将数据写入到被点击的文本框？ – 2013-03-27 15:39:11

像这样http://jsfiddle.net/Cyberjetx/QGuz8/部分答案来自http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery – 2013-03-28 15:49:31

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

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

创建一个DIV，它只是一个黑色的固定框（位置：固定的），这将覆盖页。这将是你的背景。请确保它的首台（套显示：无）不可见
进行其他固定DIV会显示您的对话框。对其进行设置，以便您的对话框将显示在浏览器窗口的中心。
使用JavaScript（或jQuery的额外效果），使双方在客户按下按钮时，你的黑DIV和对话DIV出现。

来源

2013-03-27 14:48:42 Savv

像这样http：// jsfiddle。net/8Es24/ – 2013-03-27 15:03:13

这似乎很好 – Savv 2013-03-27 15:47:59

你可能不希望添加整个jQuery用户界面库只是为了这个目的。如果我在这里，你会怎么做。

所以，当你“专注”是输入 - 让称它为“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/

来源

2013-03-27 14:55:53 banzomaikaka

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

回答

相关问题