Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.02.2016, 10:12
Кандидат Javascript-наук
Отправить личное сообщение для Castromen Посмотреть профиль Найти все сообщения от Castromen
 
Регистрация: 04.02.2015
Сообщений: 116

Коментарии в модальном окне
Доброе утро.
Помогите поправить JS код:

Функция скрывает длинное коментарие и выводит полностью при наведение на текст.
Хотелось бы что бы не при наведение это происходило а при клике открывалось модальное окно.

Спасибо
<!-- HTML-код модального окна -->
<div id="myModalBox" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Заголовок модального окна -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Комментарии</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body">
        Содержимое модального окна... ('" + bodyValue + "')
      </div>
      <!-- Футер модального окна -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>



(function () { 
 
    // Create object that have the context information about the field that we want to change it's output render  
    var bodyFiledContext = {}; 
    bodyFiledContext.Templates = {}; 
    bodyFiledContext.Templates.Fields = { 
        // Apply the new rendering for Body field on list view 
        "Comments": { "View": bodyFiledTemplate } 
    }; 
 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(bodyFiledContext); 
 
})(); 
 
// This function provides the rendering logic 
function bodyFiledTemplate(ctx) { 
 
    var bodyValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 
 
    //This regex expression use to delete html tags from the Body field 
    var regex = /(<([^>]+)>)/ig; 
 
    bodyValue = bodyValue.replace(regex, ""); 
 
    var newBodyValue = bodyValue; 
 
    if (bodyValue && bodyValue.length >= 100) 
    { 
        newBodyValue = bodyValue.substring(0, 100) + " ..."; 
    } 
 
    return "<span data-placement='left' data-toggle='popover' title='" + bodyValue + "'>" + newBodyValue + "</span>"; 
        
}
Ответить с цитированием
  #2 (permalink)  
Старый 01.02.2016, 10:59
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

window.open не помогает?
Ответить с цитированием
  #3 (permalink)  
Старый 01.02.2016, 17:54
Кандидат Javascript-наук
Отправить личное сообщение для Castromen Посмотреть профиль Найти все сообщения от Castromen
 
Регистрация: 04.02.2015
Сообщений: 116

destus,
Можете немного поподробнее.
Ответить с цитированием
  #4 (permalink)  
Старый 01.02.2016, 19:35
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Сообщение от Castromen Посмотреть сообщение
destus,
Можете немного поподробнее.
При клике открывать окно через window.open и туда комментарий кидать.

https://learn.javascript.ru/window-methods

<a id="testLink" href="#">Открыть окно</a>
	<script>
	var a = document.getElementById('testLink');
	a.addEventListener('click',function(e){
		var newWin = window.open('javascript:','','width=300,height=300');
		newWin.document.write('Здесь был длинный комментарий');
		newWin.moveBy(a.offsetLeft + 100,a.offsetTop + 100);
		a.preventDefault();
	},
	false);
	</script>

Последний раз редактировалось destus, 01.02.2016 в 19:49.
Ответить с цитированием
  #5 (permalink)  
Старый 02.02.2016, 08:18
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Только будте осторожны, $ - это не jquery!

<style>

    html, body {
        width: 100%;
        height: 100%;
    }

    .modal {
        display: none;
    }

    .block {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, 0.6);
        position: fixed;
        left: 0;
        top: 0;
    }

    .modal-content {
        border: 1px solid #eee;
        border-radius: 3px;
        position: fixed;
        left: 50%;
        top: 50%;
        background-color: #fff;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        padding: 10px 15px;
    }

    .modal-content .close {
        position: absolute;
        right: 10px;
        top: 10px;
    }
</style>

<a class="show-modal">Открыть окно</a>
<div class="modal">
    <div class="block"></div>
    <div class="modal-content">
        <div class="close">X</div>
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>
    </div>
</div>

<script>

    var $ = document.querySelector.bind(document);

    var showModal = function (headerText, contentText, footerText) {
        $('.modal').style.display = 'block';
        $('.header').innerHTML = headerText;
        $('.content').innerHTML = contentText;
        $('.footer').innerHTML = footerText;
    };

    $('.close').addEventListener('click', function () {
        $('.modal').style.display = 'none';
    }, false);

    $('.show-modal').addEventListener('click', function () {
        showModal('Какой-то заголовок!', '<h1>какой-то контент</h1>', 'какой-то футер');
    }, false);

</script>

Последний раз редактировалось tsigel, 02.02.2016 в 08:24.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Галерея в модальном окне booch jQuery 1 20.11.2015 00:30
Не работает скрипты в модальном окне igorfelix Общие вопросы Javascript 13 22.03.2015 13:41
КАк снять защиту от копирования текста в модальном окне dimas15 Элементы интерфейса 1 14.03.2013 19:36
Получение элемента в модальном окне any.zicky Библиотеки/Тулкиты/Фреймворки 1 31.08.2012 16:36
Вопрос по реализации формы в простейшем модальном окне battrack jQuery 2 22.04.2012 13:46