프로그래밍/Javascript
팝업, 부트스트랩 모달, 디자인 관련 js
즐겁게 하하하
2022. 1. 14. 03:56
728x90
■ 모달 알림, 보이기 닫기
function showModal(modal_nm) {
$("#" + modal_nm).modal('show');
}
function hideModal(modal_nm){
$("#" + modal_nm).modal('hide');
}
//alert modal
function showAlert(txt){
$("#message").html(txt);
$("#alertModal").modal("show");
}■ window.open
■ post로 값 전송하고 새창 띄우기
//html
<form id="productionViewFrm">
<!--새창 띄울때 param post 전송-->
<input type="hidden" name="w_uid" id="w_uid" />
<input type="hidden" name="w_nm" id="w_nm" />
</form>
//script
function productionView(work_uid, machine_nm) {
$("#w_uid").val(work_uid);
$("#w_machine_nm").val(machine_nm);
var popupWidth = 1900;
var popupHeight = 950;
var popupX = (window.screen.width / 2) - (popupWidth / 2);
var popupY = (window.screen.height / 2) - (popupHeight / 2);
var windowObj = window.open("", "popup_window", "height=" + popupHeight + ", width=" + popupWidth + ", left=" + popupX + ", top=20,toolbar=no, menubar=no, scrollbars=no, resizable=yes");
//post param
productionViewFrm.method = "post";
productionViewFrm.action = "/pion/pking.php";
productionViewFrm.target = "popup_window";
productionViewFrm.submit();
location.reload();
}
■ Get 으로 값 전송하고 새창 띄우기( param이 보여서 보안에 취약 )
window.open("checkid.jsp?idkk="+id,"","width=400, height=250");
===== 자식창에서 =================================================================
■ 부모창의 필드값 가져오기
1. 일반적인 방법
var parentValue = opener.document.getElementById("parentId").value;
2. jQuery를 이용한 방법
$("#parentId", opener.document).val();
3. find를 이용한 방법
$(opener.document).find("#parentId").val();
■ 부모으로 값 보내거나 이동하기
opener.location.href="javascript:fun();"; //부모창의 특정함수 실행
$(opener.location).attr("href","javascript:부모 함수명();"); //jQuery 이용
ㄴ사용예 : $(opener.location).attr("href", "javascript:getList("+ uid +");");
opener.location.href = "http://www.aaa.com";
window.opener.fnCall();
■ 자식 팝업 창에서 부모창 form submit
$(opener.document).find("#Form").attr("action","index.do").submit();
■ 자식 팝업 창에서 부모창 css 다루기
$("#parentId", opener.document).css("display", "none");
opener.document.bgColor = "yellow"; //부모창 배경색 설정
■ 자식 팝업 창에서 부모창 function 실행
opener.parent.실행할 부모 함수명();
■ 자식창에서 만든 html을 부모창에 붙이기
$(opener.document).find("#parentId").append(html);
■ 자식창에서 부모창에 값 보내기
window.opener.document.getElementById("parentId").value = "부모창으로 전달할 값";
window.opener.폼네임.parentInputName.value = value;
$("#parentEleId", parent.opener.document).val(부모창으로 전달할 값);
$("#parentEleId", parent.opener.document).text(부모창으로 전달할 값);
$(opener.document).find("#parentId").val(부모창으로 전달할 값);
■ 자식창 기타
window.self.close(); //자식창 닫기
document.location.reload(); // 팝업창 자신 페이지 새로고침
opener.location.reload(); // 부모창 페이지 새로고침
■ 팝업창에서 부모창 새로고침(새로고침 의사 표현을 묻는 창이 뜸)
window.opener.parent.location.reload();
window.opener.document.location.reload();
■ URL을 부모창이 있으면 부모창으로 보내고, 부모창이 닫히거나 존재하지 않을 경우 새창으로 열기
function fnGoOpener(url) {
if(opener.closed) { //부모창이 닫혔는지 여부 확인
window.open(url, "openWin"); // 부모창이 닫혔으니 새창으로 열기
} else {
opener.location.href = url;
opener.focus();
}
}■ addClass , removeClass
//html
<span class="switch_text_l">
<i class="fa fa-bars fa-rotate-90" aria-hidden="true"></i>
</span>
<label class="switch">
<input type="checkbox" id="style">
<span class="slider round"></span>
</label>
<span class="switch_text_r">
<i class="fa fa-bars " aria-hidden="true"></i>
</span>
//script
$(document).ready(function() {
$("#style").click(function() {
if ($("#style").prop("checked")) {
$(".defect_wrap").addClass("horizontal");
} else {
$(".defect_wrap").removeClass("horizontal");
}
});
});
■ js Click 탭 디자인
$('#search_pop_div').children('button').each( function(index,item){
if(stage==$(item).attr('tag')){$(item).trigger("click");}
});■ object TR
//상위 요소중 가장 근접한 하나를 반환
$(this).closest("tr").find(".warehouse_name").text();
// name 으로 접근
var cust_nm = $(this).closest("tr").find(":input[name='cust_hidden_nm']").val();■ TR 선택시 배경색 변경
//tr 선택시 배경색변경
function toggle(it) {
$("#tb tr").css("background-color","");
if ((it.style.backgroundColor == "none") || (it.style.backgroundColor == "")) {
it.style.backgroundColor = "#dce775";
} else {
it.style.backgroundColor = "";
}
}■ js table 좌우 두개 높이 같게 맞추기
<script>
$(document).ready( function(){
var heightArray = $(".wrapper").map( function(){
return $(this).height();
}).get();
var maxHeight = Math.max.apply( Math, heightArray);
$(".wrapper").height(maxHeight);
})
</script>
■ 테이블 행 TR 컨트롤 delTR() , makeTR()
//행 한줄 제거.
document.getElementById("myTable").deleteRow(인덱스);
$(this).parent('tr').remove();
$('#myTableRow').remove();
//클릭시 행 한줄 삭제
<html>
<table border="1">
<tr>
<td>Hello Brother! 1번</td>
<td><button onclick="deleteLine(this);">삭제</button></td>
</tr>
</table>
</html>
<script type="text/javascript">
function deleteLine(obj) {
var tr = $(obj).parent().parent();
//라인 삭제
tr.remove();
}
</script>
//버튼 클릭시 입력수량을 분할수량만큼 나누어 html 그리기
■ label for text 가져오기
<label for="ddd">유형</label> <span class="text-danger">*</span>
<select id="ddd" name="ddd" class="form-control mr-2" required>
<option value="" selected>선택</option>
<c:forEach var="list" items="${dddList}" varStatus="status">
<option value="${list.cd}" >${list.nm}</option>
</c:forEach>
</select>
======================================
$("#hisLogDiv").empty();
$.ajax({
type : "POST",
async : false,
url : "<c:url value='/sssss/ddddd.do'/>",
dataType : "json",
data : {"dddd" : $("#dddd").val() },
timeout : 30000,
error : function(request, status, error) {
console.log("error:"+error);
},
success : function(data) {
var text = '';
if(data.data.length > 0){
for(i=0; i< data.data.length; i++){
var nm = $("label[for='"+ data.data[i].chg_column +"']").text();
console.log(nm);
text += '<div style="border-bottom: 1px dashed #dadfe3 !important;">';
text += '<span>'+ data.data[i].frst_rgtr_nm +' '+ data.data[i].frst_reg_dt + '</span><br>'
text += '<span>[ '+ data.data[i].chg_column +' ] \''+ data.data[i].his_bf +'\' > \''+data.data[i].his_af+'\' 변경</span>'
text += '</div>';
}
$("#hisLogDiv").append(text);
}else{
text += '<div style="border-bottom: 1px dashed #dadfe3 !important;">';
text += '<span>변경이력이 없습니다.</span>';
text += '</div>';
$("#hisLogDiv").append(text);
}
}
});
728x90