0
Когда я открываю модальный на своем веб-сайте, весь модальный замораживает нижнюю часть себя, прокручивая на обеих вкладках, которые я вложил внутрь. Я попытался отключить прокрутку тела с помощью «переполнения: скрытый», но он не работает. Если я изменяю размер окна, замораживание исчезает, но когда я прокручиваю модальный, проблема появляется снова.У меня проблема с изображениями, загруженными в scroll modal javascript
Я загружаю изображения динамически сценарием jquery/ajax. Это может быть проблема? Конфликт между модальным javascript и моим jquery?
В этом экстракте форме тега я называю модальные, перемещаясь модальное DIV вне формы, когда называется, потому что would'n работать и у меня есть изображения форму ввода внутри модально. Когда я закрываю модальных, она движется внутри формы снова
<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 Звоню пошевелить модальный, загрузить изображения (с помощью ajax), выбрать изображение и т. д.
$('#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