Как выделенную область вставки изображения сделать видимой и кликабельной?

Question

[Вачаган Даниелян]

Недавно мне помог один человек с проблемой, описанной здесь
Сейчас, когда я создаю топик, наполняю текстом, пытаюсь добавить изображение, меню этого окна темное, и если нажать на него, то это окно просто закроется. Выяснил, что проблема в коде снизу, что именно за это отвечает без понятия. Но ссылка распространяется на весь фон. Может из-за этого ?

Сайт: geekninja.ru
Все работало нормально, но нарвался на такую вот проблему

spoiler

Загвоздка где-то здесь в этом коде:

/* Стиль для BACKGROUND ФОНА НА САЙТЕ*/
body.boxed #page-wrapper {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 200px auto 0;
    max-width: 1200px;
    position: relative;
    z-index: 2;
}
	
#branding_link {
    background: #000000 url("./images/bg.jpg") no-repeat scroll 25% 0 / cover ;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 50px;
    width: 100%;
    z-index: 1;
}

Answer 1

[Андрей Федоров]

z-index конечно. У вас есть темная "подложка". У нее z-index 2, сделайте окну для формирования топика z-index: 10 и оно будет сверху темного фона.

Comments

[Вачаган Даниелян]

.modal-content {
z-index: 10;
}

Так ? Не работает, я похоже класс найти не могу...

[Вачаган Даниелян]

Нашёл файл, вроде он, только какой класс брать не понимаю, посмотрите пожалуйста!
Файл называется window_load_img.tpl

<div class="modal fade in modal-image-upload" id="window_upload_img">
	<div class="modal-dialog">
		<div class="modal-content">
		
			<header class="modal-header">
				<button type="button" class="close jqmClose" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">{$aLang.uploadimg}</h4>
			</header>
	
			<div class="modal-body">
				<ul class="nav nav-tabs">
					<li class="active js-block-upload-img-item" data-type="pc"><a href="#">{$aLang.uploadimg_from_pc}</a></li>
					<li class="js-block-upload-img-item" data-type="link"><a href="#">{$aLang.uploadimg_from_link}</a></li>
				</ul>
				
				<br />
	
				<form method="POST" action="" enctype="multipart/form-data" id="block_upload_img_content_pc" onsubmit="return false;" class="tab-content js-block-upload-img-content" data-type="pc">
					<div class="form-group">
						<label for="img_file">{$aLang.uploadimg_file}</label>
						<input type="file" name="img_file" id="img_file" value="" />
					</div>
			
					{hook run="uploadimg_source"}
					
					<div class="form-group">
						<label for="form-image-align">{$aLang.uploadimg_align}</label>
						<select name="align" id="form-image-align" class="form-control">
							<option value="">{$aLang.uploadimg_align_no}</option>
							<option value="left">{$aLang.uploadimg_align_left}</option>
							<option value="right">{$aLang.uploadimg_align_right}</option>
							<option value="center">{$aLang.uploadimg_align_center}</option>
						</select>
					</div>
			
					<div class="form-group">
						<label for="form-image-title">{$aLang.uploadimg_title}</label>
						<input type="text" name="title" id="form-image-title" value="" class="form-control" />
					</div>
			
					{hook run="uploadimg_additional"}
			
					<button type="submit" class="btn btn-success" onclick="ls.ajaxUploadImg('block_upload_img_content_pc','{$sToLoad}');">{$aLang.uploadimg_submit}</button>
					<button type="submit" class="btn btn-default jqmClose">{$aLang.uploadimg_cancel}</button>
				</form>
		
		
				<form method="POST" action="" enctype="multipart/form-data" id="block_upload_img_content_link" onsubmit="return false;" style="display: none;" class="tab-content js-block-upload-img-content" data-type="link">
					<div class="form-group">
						<label for="img_file">{$aLang.uploadimg_url}</label>
						<input type="text" name="img_url" id="img_url" value="http://" class="form-control" />
					</div>
					
					<div class="form-group">
						<label for="form-image-url-align">{$aLang.uploadimg_align}</label>
						<select name="align" id="form-image-url-align" class="form-control">
							<option value="">{$aLang.uploadimg_align_no}</option>
							<option value="left">{$aLang.uploadimg_align_left}</option>
							<option value="right">{$aLang.uploadimg_align_right}</option>
							<option value="center">{$aLang.uploadimg_align_center}</option>
						</select>
					</div>

					<div class="form-group">
						<label for="form-image-url-title">{$aLang.uploadimg_title}</label>
						<input type="text" name="title" id="form-image-url-title" value="" class="form-control" />
					</div>

					{hook run="uploadimg_link_additional"}

					<button type="submit" class="btn btn-success" onclick="ls.topic.insertImageToEditor(jQuery('#img_url').val(),jQuery('#form-image-url-align').val(),jQuery('#form-image-url-title').val());">{$aLang.uploadimg_link_submit_paste}</button>
					{$aLang.or}
					<button type="submit" class="btn btn-success" onclick="ls.ajaxUploadImg('block_upload_img_content_link','{$sToLoad}');">{$aLang.uploadimg_link_submit_load}</button>
					<button type="submit" class="btn btn-default jqmClose">{$aLang.uploadimg_cancel}</button>
				</form>
			</div>
	
		</div>
	</div>
</div>

[Вачаган Даниелян]

ну так что ?

Answer 2

[Александр Зачиналов]

C z-index все в норме, вы сверстали как сверстали и это ваша воля, но если используете фреймворки стоит учитывать их особенности. Классы модалей в Bootstrap несут свои z-index, которые будут нарушаться, если нарушать z-index у родительских элементов. Переносите код модалей (место вставки кода) ниже, в самый корень body (например после page-wrapper, минимум) и все будет хорошо.

Comments

[Вачаган Даниелян]

я не понял че и куда, верстку не я делал,я не верстальщик, а шаблон покупали и переделывали )

[Вачаган Даниелян]

Можно подробнее? Обратите внимание на мой комментарий с Андреем

Answer 3

[Вачаган Даниелян]

updated! После вот этих манипуляций с z-index возникла такая же проблема, но теперь с окном авторизации, поможет кто ? Видео для демонстрации проблемы под спойлером. Можете сами зайти на сайт и увидеть эту проблему нажав по этой ссылке

spoiler

www.youtube.com/watch?v=PsYAOST5jAk&feature=youtu.be

Сам решил вопрос
Изменил z-index с значения 2 до 3569

/* Стиль для BACKGROUND ФОНА НА САЙТЕ*/
body.boxed #page-wrapper {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 200px auto 0;
    max-width: 1200px;
    position: relative;
    z-index: 3569;
}
	
#branding_link {
    background: #000000 url("./images/bg.jpg") no-repeat scroll 25% 0 / cover ;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 50px;
    width: 100%;
    z-index: 1;
}