Twitter 부트스트랩 모달 동적 구축
Rails 어플리케이션을 빌드하고 있는데, AJAX를 통해 Rails의 일부 콘텐츠를 모달에 배치하고 싶습니다.
Twitter Bootstrap 2.3.2 모달에서는 리모트 키를 사용하여 Ajax를 통해 콘텐츠를 로드할 수 있다는 것을 설명서를 통해 읽었습니다.
http://getbootstrap.com/2.3.2/javascript.html#modals
하면 는 ,, 이, 이, 이, 이, 이, 습, the, the, the, the, the, the, the, the, the, the, the, the, the, the, the, ,.modal-body(모달)은, 「모달」입니다.
「을한 전체 모달?.modal-header,.modal-footerJS는요?
스트링으로 이렇게 하는 것은 매우 투박해 보입니다.
partial = render_to_string(:partial => 'some-partial').gsub(%{"}, %{'}).gsub(/'/,"\\\\'").gsub("\n", "")
업데이트:
이것을 투고하고 나서, 나는 여기서 우아한 부트스트랩 3 모달 래퍼 함수를 발견했는데, 이것은 html 코드에 div를 추가할 필요가 없다.
여기 이것을 나타내는 코드 샘플이 있습니다.사용하려면 ,<body>에 div를 추가합니다(bootstrap의<div class="div">).다음은 예를 제시하겠습니다.
<div id="idMyModal"></div>
다음 방법으로 사용할 수 있습니다.
var header = "This is my dynamic header";
var content = "This is my dynamic content";
var strSubmitFunc = "applyButtonFunc()";
var btnText = "Just do it!";
doModal('idMyModal', header, content, strSubmitFunc, btnText);
모드를 닫으려면 hideModal에 대한 콜을 발행합니다.이 콜은 다음과 같이 정의됩니다.
function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
var html = '<div id="modalWindow" class="modal hide fade in" style="display:none;">';
html += '<div class="modal-header">';
html += '<a class="close" data-dismiss="modal">×</a>';
html += '<h4>'+heading+'</h4>'
html += '</div>';
html += '<div class="modal-body">';
html += '<p>';
html += formContent;
html += '</div>';
html += '<div class="modal-footer">';
if (btnText!='') {
html += '<span class="btn btn-success"';
html += ' onClick="'+strSubmitFunc+'">'+btnText;
html += '</span>';
}
html += '<span class="btn" data-dismiss="modal">';
html += 'Close';
html += '</span>'; // close button
html += '</div>'; // footer
html += '</div>'; // modalWindow
$("#"+placementId).html(html);
$("#modalWindow").modal();
}
function hideModal()
{
// Using a very general selector - this is because $('#modalDiv').hide
// will remove the modal window but not the mask
$('.modal.in').modal('hide');
}
갱신하다
최근에 우연히 bootbox.js를 발견했습니다.bootbox.js는 부트스트랩 모달의 동적 작성과 사용자와의 상호작용에 대응하는 것을 목적으로 하는 라이브러리입니다.다음 방법과는 다르지만 부트박스는 함수명이 아닌 콜백을 받아들입니다.26kb 라이브러리가 기본적으로 다음 기능을 수행하도록 정당화할 수 없기 때문에 개인적으로 사용해 본 적은 없습니다.하지만 누군가 유용하다고 생각할 것 같아서요
2016년 8월 17일 갱신
현재는 다이내믹 모달에 필요한 거의 모든 프로젝트에 부트박스를 사용하고 있습니다.효과가 좋다. 나는 그것을 강력히 추천한다.
2018년 10월 1일 갱신
부트박스는 아직 공식적으로 부트스트랩 4를 지원하지 않지만 부트스트랩 4를 지원하는 부트박스 v5.x 브랜치가 있습니다.5.0.0 로드맵과 Bootbox 5.0 배송 목록 티켓에 따르면 브랜치는 거의 준비가 된 것 같지만 아직 출시되지 않았습니다.하지만 사용법에 대한 몇 가지 설명서가 있습니다.면책사항:아직 v5.x 브랜치에 익숙하지 않아 완전성을 보증할 수 없습니다.
업데이트:2019년 3월 25일
부트스트랩4를 지원하는 부트박스 5.0이 출시되었습니다.
오리지널 투고
위의 암몬의 대답에서 코드를 따왔다.부트스트랩 3.0 업데이트
function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
html = '<div id="modalWindow" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<a class="close" data-dismiss="modal">×</a>';
html += '<h4>'+heading+'</h4>'
html += '</div>';
html += '<div class="modal-body">';
html += formContent;
html += '</div>';
html += '<div class="modal-footer">';
if (btnText!='') {
html += '<span class="btn btn-success"';
html += ' onClick="'+strSubmitFunc+'">'+btnText;
html += '</span>';
}
html += '<span class="btn" data-dismiss="modal">';
html += <?php echo "'".__t("Close")."'"; ?>;
html += '</span>'; // close button
html += '</div>'; // footer
html += '</div>'; // content
html += '</div>'; // dialog
html += '</div>'; // modalWindow
$("#"+placementId).html(html);
$("#modalWindow").modal();
$("#dynamicModal").modal('show');
}
이게 결국 제 욕구를 위해 쓰이게 된 거예요.또한 모달 닫힘 후 DOM에서 모달 삭제 이벤트핸들러도 포함됩니다정보 모달만 필요해서 제출 기능과 버튼 텍스트 인수를 제외했습니다.
function doModal(heading, formContent) {
html = '<div id="dynamicModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<a class="close" data-dismiss="modal">×</a>';
html += '<h4>'+heading+'</h4>'
html += '</div>';
html += '<div class="modal-body">';
html += formContent;
html += '</div>';
html += '<div class="modal-footer">';
html += '<span class="btn btn-primary" data-dismiss="modal">Close</span>';
html += '</div>'; // content
html += '</div>'; // dialog
html += '</div>'; // footer
html += '</div>'; // modalWindow
$('body').append(html);
$("#dynamicModal").modal();
$("#dynamicModal").modal('show');
$('#dynamicModal').on('hidden.bs.modal', function (e) {
$(this).remove();
});
}
DOM을 사용하여 Button과 Button을 클릭하자마자 나타나는 Bootstrap modal을 만들었습니다.
HTML 페이지의 선두 섹션에도 다음 내용을 포함하십시오.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script
src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
이 코드 전체가 JS 파일에 작성되어야 합니다.
//첫 번째로 버튼을 클릭하면 Bootstrap Modal이 표시됩니다.
var button = document.createElement("input");
button.className = 'btn btn-info btn-lg';
button.setAttribute("type", "button");
button.setAttribute("data-toggle", "modal");
button.setAttribute("data-target", "#myModal");
button.setAttribute("value", "More Information...");
document.getElementsByTagName('body')[0].appendChild(button);
//모달 작성:
var div1 = document.createElement('div');
div1.id = 'myModal';
div1.className = 'modal fade';
div1.setAttribute("role", "dialog");
var innerDiv1m = document.createElement('div');
innerDiv1m.className = 'modal-dialog modal-sm';
div1.appendChild(innerDiv1m);
var innerDiv2m = document.createElement('div');
innerDiv2m.className = 'modal-content';
innerDiv1m.appendChild(innerDiv2m);
var innerDiv3 = document.createElement('div');
innerDiv3.className = 'modal-header';
innerDiv2m.appendChild(innerDiv3);
var buttonM = document.createElement("button");
buttonM.className = 'close';
buttonM.setAttribute("data-dismiss", "modal");
buttonM.setAttribute("aria-hidden", "true");
buttonM.setAttribute("value", "Close");
innerDiv3.appendChild(buttonM);
var headerM = document.createElement("H4");
headerM.className = 'modal-title';
innerDiv3.appendChild(headerM);
var innerDiv31 = document.createElement('div');
innerDiv31.className = 'modal-body';
innerDiv2m.appendChild(innerDiv31);
var para = document.createElement('p');
innerDiv31.appendChild(para);
para.innerHTML = "paragraph";
var innerDiv32 = document.createElement('div');
innerDiv32.className = 'modal-footer';
innerDiv2m.appendChild(innerDiv32);
var closeButton = document.createElement("input");
closeButton.className = 'btn btn-default';
closeButton.setAttribute("data-dismiss", "modal");
closeButton.setAttribute("type", "button");
closeButton.setAttribute("value", "Close");
innerDiv32.appendChild(closeButton);
document.getElementsByTagName('body')[0].appendChild(div1);
//따라서 작성한 버튼을 클릭하면 모달 화면이 나타납니다.
승인된 답변과 매우 유사한 주제이지만 jQuery 플러그인으로 작성되었습니다.개발 중인 툴킷에 내장할 논리를 찾고 있었는데, 이 내용을 기재한 것을 찾을 수 없었습니다.
아래에는 많은 코드가 있지만, 한 번 작성한 후 쉽게 호출할 수 있도록 설계되어 있기 때문에 스포일러로서 모든 것을 설정한 후에는 다음과 같이 사용하기 쉽습니다.
$.fn.alert("utils.js makes this so easy!");
완전한 작업 예로서 다음과 같은 것이 있습니다.
https://jsfiddle.net/63zvqeff/
기존은 필요 없습니다.<div />네스트된 대화와 함께 사용할 수 있습니다. 작업 중인 도구 키트에서 가져온 것입니다. 따라서 모든 관련 비트를 포함시켜 작업 복사/붙여넣기 예시를 보여 줍니다.
(function ($)
{
$.utils = {
// http://stackoverflow.com/a/8809472
createUUID: function ()
{
var d = new Date().getTime();
if (window.performance && typeof window.performance.now === "function")
{
d += performance.now(); //use high-precision timer if available
}
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c)
{
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
}
$.fn.dialogue = function (options)
{
var defaults = {
title: "", content: $("<p />"),
closeIcon: false, id: $.utils.createUUID(), open: function () { }, buttons: []
};
var settings = $.extend(true, {}, defaults, options);
// create the DOM structure
var $modal = $("<div />").attr("id", settings.id).attr("role", "dialog").addClass("modal fade")
.append($("<div />").addClass("modal-dialog")
.append($("<div />").addClass("modal-content")
.append($("<div />").addClass("modal-header")
.append($("<h4 />").addClass("modal-title").text(settings.title)))
.append($("<div />").addClass("modal-body")
.append(settings.content))
.append($("<div />").addClass("modal-footer")
)
)
);
$modal.shown = false;
$modal.dismiss = function ()
{
// loop until its shown
// this is only because you can do $.fn.alert("utils.js makes this so easy!").dismiss(); in which case it will try to remove it before its finished rendering
if (!$modal.shown)
{
window.setTimeout(function ()
{
$modal.dismiss();
}, 50);
return;
}
// hide the dialogue
$modal.modal("hide");
// remove the blanking
$modal.prev().remove();
// remove the dialogue
$modal.empty().remove();
$("body").removeClass("modal-open");
}
if (settings.closeIcon)
$modal.find(".modal-header").prepend($("<button />").attr("type", "button").addClass("close").html("×").click(function () { $modal.dismiss() }));
// add the buttons
var $footer = $modal.find(".modal-footer");
for(var i=0; i < settings.buttons.length; i++)
{
(function (btn)
{
$footer.prepend($("<button />").addClass("btn btn-default")
.attr("id", btn.id)
.attr("type", "button")
.text(btn.text)
.click(function ()
{
btn.click($modal)
}))
})(settings.buttons[i]);
}
settings.open($modal);
$modal.on('shown.bs.modal', function (e) {
$modal.shown = true;
});
// show the dialogue
$modal.modal("show");
return $modal;
};
})(jQuery);
기본 경보()를 원하는 시간에 맞춰 도우미 함수를 작성했습니다.
(function ($)
{
$.fn.alert = function (message)
{
return $.fn.dialogue({
title: "Alert",
content: $("<p />").text(message),
closeIcon: true,
buttons: [
{ text: "Close", id: $.utils.createUUID(), click: function ($modal) { $modal.dismiss(); } }
]
});
};
})(jQuery);
그렇지 않으면 내용을 jQuery 개체로 작성한 후 다음과 같은 개체 형식으로 전달해야 합니다.
{
title: "", // what ever you want in the title bar
content: $("<p />"), // any DOM structure you can build as a jQuery object
closeIcon: false, // does the dialogue have a X in the tilte bar to close it
id: $.utils.createUUID(), // a reference id
open: function () { }, // a function called after the DOM structure is built but BEFORE rendering
buttons: [ // an array of buttons to include in the footer
// example "close" button, all buttons get a reference to $modal passed into them
// .dismiss() is a function attached to $modal to revert the DOM changes
{ text: "Close", click: function ($modal) { $modal.dismiss(); } }
]
};
저도 같은 문제가 있었는데, 많은 조사를 한 끝에 결국 제 요건에 따라 동적으로 모달(modal)을 만드는 js 함수를 구축했습니다.이 기능을 사용하면 다음과 같은 팝업을 한 줄로 만들 수 있습니다.
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
또는 iframe, 비디오 팝업 등 다른 복잡한 기능을 사용할 수도 있습니다.
https://github.com/aybhalala/puymodals에서 찾을 수 있습니다.데모는 http://pateladitya.com/puymodals/를 참조해 주세요.
언급URL : https://stackoverflow.com/questions/22313992/dynamically-build-twitter-bootstrap-modal
'programing' 카테고리의 다른 글
| 최신 Spring Boot + Data JPA 및 휴지 상태 설정을 사용하여 ddl 작성 스크립트를 생성하는 방법 (0) | 2023.03.21 |
|---|---|
| 리액트에서 쉼표로 숫자를 포맷하려면 어떻게 해야 합니까? (0) | 2023.03.21 |
| 폼 검증을 간소화하는 방법 (0) | 2023.03.21 |
| AngularJS는 객체 배열 내의 객체 속성을 감시합니다. (0) | 2023.03.21 |
| 현재 루트명/컨트롤러를 기반으로 클래스를 설정하는 방법 (0) | 2023.03.21 |