Sign in to follow this  
xoff

Как отключить скролл страницы при открытии модального окна

Recommended Posts

Как сделать что при открытии модального окна пропадал скролл основной страницы а после закрытия снова появлялся, помогите.

И если можно то сделать как нибудь не используя для этого определенный "div id" а то у меня они меняются, я так понимаю это делается с помощью js

html:


<a href="#zakaz" class="buy">Заказать</a>
<div id="zakaz" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">X</a>
<center><h2>Оформление заказа</h2></center>
</div>
</div>

css:

.modalDialog {
position: fixed;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}

.modalDialog > div {
width: 700px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.modalDialog:target {
display: block;
pointer-events: auto;
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

Edited by xoff

Share this post


Link to post
Share on other sites

Я подключал их скрипт вставлял такой код после закрытия дива своего модального окна:

            <script>
$('#zakaz_stv-s320').click(function() {
var c = $('<div class="modalDialog" />');
c.html($('.b-text').html());
c.prepend('<a href="#close" title="Закрыть" class="close">X</a>');
$.arcticmodal({
content: c
});
});

И работает это все относительно плохо, скролл убирается если кликнуть помимо модельного окна (а не при открытии его) а когда закрываю модальное окно скролл на основной странице не появляется, что не так делаю? или надо в файле jquery.arcticmodal-0.3.min.js тоже что-то поменять?

для сравнение вот код с этого сайта

Окно с большой высотой:


var c = $('<div class="box-modal" />');
c.html($('.b-text').html());
c.prepend('<div class="box-modal_close arcticmodal-close">X</div>');
$.arcticmodal({
content: c
});

_____________________________________________________________

http://habrahabr.ru/post/148515/

Тут есть еще способ с помощью body class="look" может с помощью него кто нибудь поможет реализовать??

Edited by xoff

Share this post


Link to post
Share on other sites

Вот может кто поможет как этот скрипт переделать?

Не знаю как под свое модальное окно подделать - по разному пробую вообще пропадает скролл страницы а нужно только при открывании модального окна


<script>
$("body").css("overflow", "hidden");

$(".close .close_overlay").click(function(){

$("body").css("overflow", "auto");
});
</script>

Share this post


Link to post
Share on other sites

/*стили*/
html {
overflow-y: scroll;
}

/*Javascript*/
$(".showMePleaseModalWindow").click(function() {

if ($("div.modalWindow:visible").size() > 0) {

$("div.modalWindow").css("display","none");
$("html").css("overflow-y","scroll");

} else {

$("div.modalWindow").css("display","block");
$("html").css("overflow-y","hidden");

}

});

Share this post


Link to post
Share on other sites


/*стили*/
html {
overflow-y: scroll;
}

/*Javascript*/
$(".showMePleaseModalWindow").click(function() {

if ($("div.modalWindow:visible").size() > 0) {

$("div.modalWindow").css("display","none");
$("html").css("overflow-y","scroll");

} else {

$("div.modalWindow").css("display","block");
$("html").css("overflow-y","hidden");

}

});

куда что свое подставлять? Я сверху свой код выложил

Share this post


Link to post
Share on other sites

Я представил общий случай.

Если есть видимое модальное окно, то скрываем его и возвращаем скролл странице. Иначе показываем модальное окно и убираем у страницы скролл.

Share this post


Link to post
Share on other sites

есть ссылка на открытие модального окна:

<a href="#zakaz" class="buy">Заказать</a>

есть само модальное окно которое открывается по ссылке:

<div id="zakaz" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">X</a> <-!!!!! ссылка на закрытие модального окна !!!!->
<center><h2>Оформление заказа</h2></center>
</div>
</div>

Есть стили внешнего оформления окна и ссылки закрытия (в первом посту)

Как привязать твой общий пример к моему конкретному?

Edited by xoff

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    anasteisa
    Newest Member
    anasteisa
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если в кратце, проблема возникает из за того что когда заходим на страницу изначально текущий урл страницы
      http://localhost:3004/tablets/tablet_1
      Если мы покликаем по табам (у которых тоже реализован роутинг и к урлу добавляется еще значение)
      То урл будет менять свое значение например на 
      http://localhost:3004/tablets/tablet_1/characteristics
      И вот, допустим у нас сейчас этот урл и если страница перезагрзиться, то реакт будет считать что текущий урл уже
      http://localhost:3004/tablets/tablet_1/characteristics
      а не 
      http://localhost:3004/tablets/tablet_1 как предполагается
      И из за этого возникают проблемы
      Могут быть вот такие страницы 
      localhost:3004/tablets/tablet_1/characteristics/characteristics А так быть не должно. Подскажите как решить такую проблему
      Если подробнее:
      Делаю Интернет-магазин на Реакте (в рамках учебного проекта)
      На данный момент сделал роуты для нескольких страниц 
      [JS]
      <Route path="/" ... /> // главная страница
      <Route path="/tablets"  ... />  // страница категорий
      <Route path="/tablets/:id"  ... /> // детальная страница товара
      [/JS]
      И это все работает хорошо Проблема с роутингом началась когда я начал делать табы на детальной странице товара. Их я тоже хотел сделать через роутинг.
      [JS]
      <Route path="/tablets/:id/characteristics"  ... />
      <Route path="/tablets/:id/opinion"  ... />
      <Route path="/tablets/:id"  ... /> // по дефолту
      [/JS]
      Пути у табов:
      [JS]
      to=`${ текущий урл страницы }/characteristics` // Таб "Характеристки"
      to=`${ текущий урл страницы }/opinion` // Таб Отзывы
      to=`${ текущий урл страницы }` // Таб "Описание" (по дефолту)
      [/JS] http://skrinshoter.ru/s/221019/1f36Q0Gw И это работает исправно, до тех пор пока страница не перезагрузиться.
      Прикол в том, что если мы кликали по табам, урл менялся и допустим стал таким : http://localhost:3004/tablets/tablet_1/characteristics
      И потом вдруг страницу перезагрузили А при перезагрузке страницы текущий адрес получается уже http://localhost:3004/tablets/tablet_1/characteristics     а не   http://localhost:3004/tablets/tablet_1     как задумывалось.     Из-за этого возникают проблемы когда кликаешь по табам:     адрес получается уже      http://localhost:3004/tablets/tablet_1/characteristics/characteristics     http://skrinshoter.ru/s/221019/eTe8ZW5F Вот в этом и проблема. Как такое решить?
      Дело в том что location.pathname я передаю через props дочернему компоненту, он принимает его и в state я добавляю ему
      [JS]`${ this.props.pathName }/characteristics`[/JS]Вот код, как это выглядит:
        class App extends Component {   render() {     <Switch>         <Route path="/" exact={true} component={ CategoriesList }/>       <Route path="/tablets/:id/characteristics"         render={ ({ match, location }) => {           const { id } = match.params;           return <DetailPage itemId={ id } currentTab="characteristics" pathName={ location.pathname } />         }}/>       <Route path="/tablets/:id/opinion"         render={ ({ match, location }) => {           const { id } = match.params;           return <DetailPage itemId={ id } currentTab="opinion" pathName={ location.pathname } />         }}/>       <Route path="/tablets/:id"         render={ ({ match, location }) => {           const { id } = match.params;           return <DetailPage itemId={ id } currentTab="description" pathName={ location.pathname } />         }}/>       <Route path="/tablets"         render={({ location }) =>           <CategoryPage             goodList={goodsList.tablets}             title="Tablets"             location={ location }             exact={true}             />}       />     </Switch>   } } class DetailPage extends Component {   state = {     tabs: {       opinion: {         tabId: 'opinionTab',         tabTitle: 'Отзывы',         tabPathTo: `${ this.props.pathName }/opinion`,         tabContent: 'Контент отзывов'       },       characteristics: {         tabId: 'characteristicsTab',         tabTitle: 'Характеристики',         tabPathTo: `${ this.props.pathName }/characteristics`,         tabContent: 'Контент Характеристик'       },       description: {         tabId: 'descriptionTab',         tabTitle: 'Описание',         tabPathTo: `${ this.props.pathName }`,         tabContent: 'Контент описания'       }     }   };   findCurrentGood(goodsList, itemId) {     for (let key in goodsList) {       goodsList[key].forEach(category => {         if (category.id === itemId) {           this.currentGood = category         }       })     }   }   findCurrentTab() {     for (let key in this.state.tabs) {       if (key === this.props.currentTab) {         this.activeTab = this.state.tabs[key];       }     }   }   render() {     const { goodsList, itemId, currentTab, pathName } = this.props;     const { tabs } = this.state;     this.findCurrentGood(goodsList, itemId);     this.findCurrentTab();               return() {       <div className="tabs">             <div className="tabs__menu">               {                 Object.keys(tabs).map(tab => {                   const tabClass = classNames('tabs__link', {                     'tabs__link--active' : tab === currentTab                   });                   return (                     <Link key={ tabs[tab].tabId }                           to={  tabs[tab].tabPathTo }                           className={ tabClass } >                       { tabs[tab].tabTitle }                     </Link>                   )                 })               }             </div>             <div className="tabs__content">               <h3 className="info__title">{ this.activeTab.tabTitle }</h3>               <div className="info__text">                 { this.activeTab.tabContent }               </div>             </div>           </div>     }   } }  
    • Создали Landing Page на тематику "Межевание земельного участка" Сделано: - С нуля разработана концепция и структура Landing page;
      - Разработан стильный и современный дизайн;
      - Наполнили контентом;
      - Качественная верстка и программирование сайта (быстрая загрузка, чистый, валидный код);
      - Подобрали хостинг и домен для клиента, установили и настроили сайт, установили админку Клиент на выходе получил полностью готовый для работы Landing Page Срок изготовления - 2 недели Если вам нужен качественно представить свою услугу, товары или компанию пишите по контактам ниже, сделаем вам крутой веб-ресурс, будь то Landing Page, Сайт многостраничник, Интернет-магазин.
      По невысокой цене и разумные сроки
      Контакты: Телеграм: @Nikker
      Скайп: smo_perviy
      E-Mail: Golllandec@gmail.com    
    • Здравствуйте. Предоставьте, пожалуйста, ссылку на сайт
  • Popular Contributors