내 웹 페이지에 example / demo 코드 줄이 있습니다 .
/* Messages Modal */
$(document).ready(function(){
var informer = $("#messageInformer a");
var refreshBadge = function(messageCount) {
var badge = informer.find(".badge");
if (messageCount > 0) {
if (!badge.length) {
informer.text("Messages ");
informer.append("<span class=\"badge\">" + messageCount + "</span>");
}
else {
badge.text(messageCount);
}
}
else {
// informer.text("No messages");
informer.text("Messages ");
informer.append("<span class=\"badge\">" + messageCount + "</span>");
}
};
var buildMessage = function(message) {
var htmlMessage = "<div class=\"alert fade in\">";
htmlMessage += "<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-lable=\"close\" data-id=\"" + message.id + "\">×</a>";
htmlMessage += "<strong>" + message.title + "</strong>";
htmlMessage += "<p>" + message.text + "</p>";
return htmlMessage;
}
// Messages To Display
var messages = [
{
id: "1",
title: "Title 01:",
text: "<ul> \
<li>List Item</li> \
<li>List Item</li> \
</ul> \
<br/> \
<p>Paragraph</p> \
<p>E-Mail: <a href=\"mailto:[email protected]\">[email protected]</a></p> \
"
},
{
id: "2",
title: "Title 02:",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat velit et vehicula vulputate."
},
{
id: "3",
title: "Title 03:",
text: "Quisque viverra nisl ut arcu eleifend aliquam. Ut faucibus efficitur nibh, sit amet tincidunt est volutpat non."
}
];
refreshBadge(messages.length);
informer.on("click", function(e) {
e.preventDefault();
var modalBody = $(".modal-body");
modalBody.empty();
for (var i = 0; i < messages.length; i++) {
modalBody.append(buildMessage(messages[i]));
}
if (messages.length == 0) {
$('.modal-body').text('There are no more messages to display.');
}
});
$("body").delegate(".alert .close", "click", function() {
var messageId = $(this).data("id");
// AJAX
messages = messages.filter(function(el) {
return el.id != messageId;
});
if (messages.length == 0) {
// $("#messagesModal").modal("hide");
$('.modal-body').text('There are no more messages to display.');
}
refreshBadge(messages.length);
});
});<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<p data-toggle="modal" data-target="#messagesModal" id="messageInformer"><a href="#">Messages <span class="badge"></span></a>
</p>
<!-- Modal -->
<div class="modal fade" id="messagesModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Messages</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<div class="col-md-8 pull-left">
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div> 페이지를 새로 고칠 때 모달, 배지 및 경고의 데이터를 어떻게 저장할 수 있습니까?
예를 들어 세 개의 메시지 중 하나를 제거한 다음 페이지를 새로 고치면 두 개의 메시지 만 사용할 수 있습니다.
구현하려는 샘플 목적에 대한 위의 답변 때문에 내 답변을 편집하지 않을 것입니다 sessionStorage. 여기에서 특정 문제를 해결하여 문제를 해결할 수 있도록 다른 코드를 게시하겠습니다.
sessionStorage하나의 탭에서 작동하는 요소를 이미 제거하는 관리 기술을 구현 하고 있습니다. 테스트 목적으로 나는 그것에 대한 바이올린을 설정하지 않으므로 코드를 복사하고 로컬 환경에서 설정하면됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function(){
var informer = $("#messageInformer a");
var refreshBadge = function(messageCount) {
var badge = informer.find(".badge");
if (messageCount > 0) {
if (!badge.length) {
informer.text("Messages ");
informer.append("<span class=\"badge\">" + messageCount + "</span>");
}
else {
badge.text(messageCount);
}
}
else {
// informer.text("No messages");
informer.text("Messages ");
informer.append("<span class=\"badge\">" + messageCount + "</span>");
}
};
var buildMessage = function(message) {
var htmlMessage = "<div class=\"alert fade in\">";
htmlMessage += "<a href=\"javascript:;\" class=\"close\" data-dismiss=\"alert\" aria-lable=\"close\" data-id=\"" + message.id + "\" onclick='deleteIds(this)'>×</a>";
htmlMessage += "<strong>" + message.title + "</strong>";
htmlMessage += "<p>" + message.text + "</p>";
return htmlMessage;
}
// Messages To Display
var messages = [
{
id: "1",
title: "Title 01:",
text: "<ul> \
<li>List Item</li> \
<li>List Item</li> \
</ul> \
<br> \
<p>Paragraph</p> \
<p>E-Mail: <a href=\"mailto:[email protected]\">[email protected]</a></p> \
"
},
{
id: "2",
title: "Title 02:",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat velit et vehicula vulputate."
},
{
id: "3",
title: "Title 03:",
text: "Quisque viverra nisl ut arcu eleifend aliquam. Ut faucibus efficitur nibh, sit amet tincidunt est volutpat non."
}
];
removeDeletedItem(messages);
refreshBadge(messages.length);
informer.on("click", function(e) {
e.preventDefault();
var modalBody = $(".modal-body");
modalBody.empty();
for (var i = 0; i < messages.length; i++) {
modalBody.append(buildMessage(messages[i]));
}
if (messages.length == 0) {
$('.modal-body').text('There are no more messages to display.');
}
});
$("body").delegate(".alert .close", "click", function() {
var messageId = $(this).data("id");
// AJAX
messages = messages.filter(function(el) {
return el.id != messageId;
});
if (messages.length == 0) {
// $("#messagesModal").modal("hide");
$('.modal-body').text('There are no more messages to display.');
}
refreshBadge(messages.length);
});
});
function deleteIds(obj){
var currentId = $(obj).attr('data-id');
var id = sessionStorage.getItem("id");
if(id == null){
sessionStorage.setItem("id", currentId);
}else{
var str = id.split(',').join();
str = str + ','+ currentId
sessionStorage.setItem("id", str);
}
$(obj).parent().hide();
}
function removeDeletedItem(obj){
var id = sessionStorage.getItem("id");
if(id != null){
var temp = id.split(',');
$.each(temp, function(index, value){
var i = -1;
$.each(obj, function(ind,val){
if(val.id == value)
i = ind;
});
if(i != -1){
obj.splice(i,1);
}
});
}
}
</script>
<body>
<p data-toggle="modal" data-target="#messagesModal" id="messageInformer"><a href="#">Messages <span class="badge"></span></a>
</p>
<!-- Modal -->
<div class="modal fade" id="messagesModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Messages</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<div class="col-md-8 pull-left">
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다