Если тебе нужно модальное окно, то могу подсказать как сделать на jQuery с помощью плагина. Он будет затенять тебе весь сайт, и выводить нужный элемент поверх. Выводимому элементу можешь задать свои стили.

У вас для тега body прописаны стили
margin-left: .7in;
margin-right: .7in;
margin-top: .75in;
margin-bottom: .75in;

Пропишите в css файле

body{
margin:0;
}

Что бы сделать две цены на один товар, нужно использовать "Торговые предложения". Если же вы хотите использовать разные типы цен ( не путать с ценой ), то вы должны в настройках компонента выбрать эти типы цен для отображения и в административном разделе сайта, в настройках "Тип Цены" (где вы её создавали) выбрать для каких пользователей, какой тип будет отображаться.

Тип цены

Торговые предложения

1) Копируете шаблон компонента
2) Открываете template.php
3) Если проект рабочий, и пользователи уже пользуются ресурсом, выводите под админом $arResult или $arItem ( в зависимости какой у вас компонент ). Делается это так

<?global $USER;
		if ($USER->IsAdmin()){?>
                      <pre><?print_r($arResult)?></pre>
             <?}?>

Ищите в этом массиве ваши типы цены.

Далее выводите

<?echo $arResult["PRICE"]["PRICE_1"]["VALUE"]?> 
     <?echo $arResult["PRICE"]["PRICE_2"]["VALUE"]?>  // у вас пути до значения и названия типа цен могут отличаться

Важно! Если вы используете комплексный компонент каталог. То при создании копии шаблона компонента путь до нужных teamplate.php будет примерно такой:

/public_html/bitrix/templates/Название шаблона сайта/components/bitrix/catalog/название шаблона компонента/bitrix/catalog.element/.default - для карточки товара

/public_html/bitrix/templates/Название шаблона сайта/components/bitrix/catalog/название шаблона компонента/bitrix/catalog.section/.default - для списка товаров

Пропиши ID этому div например target

var theClass = $('#target').attr('class');

if(theClass == " js-hidden"){
  alert("У этого дива нужный нам класс");
}else{
alert("У этого дива класс был удалён");
}