在黑暗的頁面上顯示模態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

回答

相關問題