0
내 웹 사이트에서 모달을 열면 스크롤하는 동안 전체 모달이 스크롤되어있는 동안 양쪽 탭에 고정됩니다. 'overflow : hidden'이있는 본문 스크롤을 비활성화하려고했지만 작동하지 않습니다. 창 크기를 조정하면 고정이 사라지지만 모달을 스크롤하면 문제가 다시 나타납니다.스크롤 모드에서로드 된 이미지에 문제가 있습니다. javascript
jquery/ajax 스크립트를 사용하여 동적으로 이미지를로드합니다. 문제 일 수 있습니까? 모달 자바 스크립트와 내 jquery 사이의 충돌? 전화했을 때 작동 would'n 내가 모달 내부의 이미지 형태로 입력을 가지고 있기 때문에, 형태 이외의 모달 DIV 이동 내가 모달 호출 폼 태그의 추출물에서
. 내가 모달를 닫으면, 다시
<div class="form-group" id="ProgramImage">
<label class="col-sm-3 control-label">Main Image</label>
<?php echo $this->element('common/tooltip',array('message' => 'We need to put in file sizes and image sizes here','title' => 'Image Upload')); ?>
<div class="col-sm-8">
<a href="javascript:;" onclick="put_out();jQuery('#modal-1').modal('show');">
<?php
if(file_exists('./img/'.$this->request->data['Program']['image_url']) && !empty($this->request->data['Program']['image_url'])) {
echo $this->Html->image($this->request->data['Program']['image_url'].'?'.$timestamp,array('id' => 'image_url_preview','style'=>'max-height: 200px'));
} else {
echo $this->Html->image('placehold_640x300.gif',array('id' => 'image_url_preview','style'=>'max-height: 200px'));
}
?>
</a>
<br /><br />
<a href="javascript:;" onclick="put_out();jQuery('#modal-1').modal('show');" class="btn btn-blue">Choose</a>
</div>
</div>
모달 코드
<style type="text/css"> .img_selected{ border:5px solid #bbb; margin-bottom: 22px; } </style> <div class="modal fade" id="modal-1"> <div class="modal-dialog" style="width: 70%;"> <div class="modal-content"> <div class="col-md-12"> <br/> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title"> <h2>Upload image</h2> <span></span> </div> <div class="panel-options"> </div> </div> <div class="col-md-12"> <div class="row "> <ul class="nav nav-tabs" id="tabs"> <li class="active"> <a href="#upload" onclick='upload();' data-toggle="tab"> <span class="hidden-xs" >Upload new image</span> </a> </li> <li> <a href="#library" onclick='library();' data-toggle="tab"> <span class="hidden-xs">Choose from library</span> </a> </li> </ul> </div> </div> <div class="panel-body" style="max-height: 50vh;overflow:scroll;"> <div class="form-group"> <div class="col-sm-12"> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="upload"> <div class="fileinput fileinput-new" data-provides="fileinput" id="newselectiondiv"> <div> <span class="btn btn-blue btn-file btn-lg"> <!-- <input type="file" name="data[Facility][image_url]" accept="image/*"> --> <?php echo $this->Form->input('image_url',array('class' => 'target', 'accept' => 'image/*','type' => 'file','div' => false));?>Upload</span> <?php // if(file_exists('./img/'.$this->request->data['Program']['image_url']) && !empty($this->request->data['Program']['image_url'])) { // echo '<a class="btn btn-orange" id="button-crop" onclick="crop_image()">Crop</a>'; // //echo $this->Form->hidden('ex_image_url', array('value' => './img/'.$this->request->data['Program']['image_url'])); // echo $this->Form->input('ex_image_url',array('type' => 'hidden', 'id' => 'ex_image_url', 'value' => './img/'.$this->request->data['Program']['image_url'])); // } ?> <a class="btn btn-orange fileinput-exists" id="button-removeImage" data-dismiss="fileinput">Remove</a> <?php //if(!isset($this->request->data['Program']['image_url']) && empty($this->request->data['Program']['image_url'])) { //echo '<a class="btn btn-orange fileinput-exists" id="button-crop" onclick="crop_image()">Crop</a>'; } ?> <a class="btn btn-orange" id="button-saveImage" style="display: none" onclick="save_image()">Save Image</a> <span id="crop_confirm" style="display:none"> Image crop saved!</span> </div> <div class="fileinput-new thumbnail" style="width: 100%; height: 50%" data-trigger="fileinput" id="fileinput-new"> <?php if(file_exists('./img/'.$this->request->data['Program']['image_url']) && !empty($this->request->data['Program']['image_url'])) { echo $this->Html->image($this->request->data['Program']['image_url'].'?'.$timestamp); } else { echo $this->Html->image('placehold_640x300.gif'); } ?> </div> <div id="cropImageContainer"> <span style="font-size: 15px">Drag the cursor on the image to crop it:</span> <?php echo $this->Html->image($this->request->data['Program']['image_url'].'?'.$timestamp, array('id' => 'croppedImage')); echo $this->Form->input('crop_x',array('type' => 'hidden', 'id' => 'crop_x')); echo $this->Form->input('crop_y',array('type' => 'hidden', 'id' => 'crop_y')); echo $this->Form->input('crop_w',array('type' => 'hidden', 'id' => 'crop_w')); echo $this->Form->input('crop_h',array('type' => 'hidden', 'id' => 'crop_h')); echo $this->Form->input('crop_saved',array('type' => 'hidden', 'id' => 'crop_saved')); ?> </div> <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 1280px; max-height: 600px" id="fileinput-exists"></div> </div> </div> <div role="tabpanel" class="tab-pane fade" id="library"> <?php echo $this->Form->hidden('image_library',array('class' => 'target','type' => 'text','value' => ''));?> <div class="gallery-env" id='library_list'> </div> </div> </div> </div> </div> </div> </div> </div> <!-- <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Load photo</h4> </div> <div class="modal-body"> <div class="form-group"> <div class="col-sm-12"> <?php // if(file_exists('./img/'.$this->request->data['Program']['image_url']) && !empty($this->request->data['Program']['image_url'])) { // echo $this->Html->image($this->request->data['Program']['image_url'].'?'.$timestamp, array('style' => "width: 100px;" )); // } else { // echo $this->Html->image('placehold_640x300.gif', array('style' => "width: 100px;" )); // } ?> </div> </div> </div> --> <div class="modal-footer"> <button type="button" class="btn btn-red btn-lg" onclick="put_in();delete_choose();"data-dismiss="modal">Close</button> <button type="button" class="btn btn-blue btn-lg" onclick="put_in();preview();" data-dismiss="modal">Confirm</button> </div> </div> </div> </div>가, 마지막 인 형태의 내부 이동 내가 이동 호출 JS 코드 내 모달, 이미지로드 (아약스 사용), 이미지 선택 등
$('#tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
function preview(){
if ($("input[name='data[Program][image_library]']").val() == '')
var url = $("[id='croppedImagePre']").attr('src');
else
var url = '../../'+$("input[name='data[Program][image_library]']").val();
$("[id='image_url_preview']").attr('src',url);
}
function upload(){
$("input[name='data[Program][image_library]']").val('');
}
function library(){
$result = [];
$.ajax({
url : '../images_ajax',
type: 'POST',
async: false,
//data: {branch_id:branch_id,namespace:namespace}, img-thumbnail
success : function(response){
//console.log(response);
result = response;
}
});
var full_obj = JSON.parse(result);
var directory = full_obj.directory;
var url = full_obj.url;
var size = full_obj.size;
var html = '';
for(var i = 0; i < size; i++){
html +='<div class="col-sm-2 col-xs-4" data-tag="1d"><article class="image-thumb "><a href="javascript:;" onclick="select_this(\'image_'+i+'\',\''+size+'\',\''+directory+url[i]+'\')" class="image"><img id="image_'+i+'" src="../../'+directory+url[i]+'"></a></article></div>';
}
$("#library_list").html(html);
}
function select_this(id,size,url){
for (var i = 0; i < size; i++) {
if (('image_'+i == id) && !($("#image_"+i).hasClass('img_selected'))){
$("#image_"+i).addClass('img_selected');
$("input[name='data[Program][image_library]']").val(url);
}else
if(('image_'+i != id) && $("#image_"+i).hasClass('img_selected'))
$("#image_"+i).removeClass('img_selected');
};
}
function delete_choose(){
upload();
$("input[name='data[Program][image_url]']").val('') ;
}
function put_in(){
$("#modal-1").appendTo("#ProgramImage");
}
function put_out(){
$("#modal-1").prependTo("body");
}
문제를 더 잘 이해할 수 있도록 문제의 코드를 알려 주시기 바랍니다. – WolfLink