モーダル作成

<div class="panel">
        <a class="c-btn js-open-modal" href="#">ボタンの名前</a>
        <div class="modal-panel-back disable">
            <div class="modal-panel">
                [cs_gb id=301]/*ここにモーダル表示させたいものを入力*/
                    <div class="btn-area">
                        <a class="c-btn js-close-modal" href="#">モーダル内の閉じるボタン</a>
                    </div>
                </div>
            </div>
        </div>

1

2

3

4

5

6

7

8

9

10

11

<a class="c-btn js-open-modal" href="#">ボタンの名前</a>

[cs_gb id=301]/*ここにモーダル表示させたいものを入力*/

<a class="c-btn js-close-modal" href="#">モーダル内の閉じるボタン</a>

</div>

/* モーダルの設定 */
/* ボタン部分 */
.panel {
  width: 80%;
	max-width:350px;
  background-color: rgb(0, 147, 68);
  border-radius:0.5em;
  text-align: center;
  transition:0.3s all;
}
.panel:hover{
   background-color: rgba(0, 147, 68,0.75);
}
.panel a{
  color:#fff;
  display:block;
  padding: 1.7em 0;
}

/* モーダル部分 */
.modal-panel-back {
  position: fixed;
  width: 100%;
  height: 100%;  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(200,200,200,.5);
  overflow-y: scroll; 

}

/* モーダルを非表示に設定 */
.modal-panel-back.disable {
  display: none;
  transition:0.3s all;
}

/* モーダル内のコンテンツ */
.modal-panel {
  width:95%;
  max-width:1080px;
  background-color: white;
  padding: 30px 30px 80px 30px;
  margin: 100px auto;
  z-index:9999;
}
.btn-area{
  float:right;
  width:150px;
  max-width:250px;
  background-color:rgb(99, 98, 98);
}
.btn-area:hover{
  background-color:rgba(99, 98, 98,0.75);
}
.btn-area a{
  padding:1em 0;
}

/* モーダル時に背景を固定 */
body.modal-open {
  position:fixed;
  width:100%;
  padding-right:15px;
  
}

@media(max-width:767px){
  .panel{
    margin:0 auto;
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

/* モーダルの設定 */

/* ボタン部分 */

.panel {

width: 80%;

max-width:350px;

background-color: rgb(0, 147, 68);

border-radius:0.5em;

text-align: center;

transition:0.3s all;

}

.panel:hover{

background-color: rgba(0, 147, 68,0.75);

}

.panel a{

color:#fff;

display:block;

padding: 1.7em 0;

}

/* モーダル部分 */

.modal-panel-back {

position: fixed;

width: 100%;

height: 100%;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: rgba(200,200,200,.5);

overflow-y: scroll;

}

/* モーダルを非表示に設定 */

.modal-panel-back.disable {

display: none;

transition:0.3s all;

}

/* モーダル内のコンテンツ */

.modal-panel {

width:95%;

max-width:1080px;

background-color: white;

padding: 30px 30px 80px 30px;

margin: 100px auto;

z-index:9999;

}

.btn-area{

float:right;

width:150px;

max-width:250px;

background-color:rgb(99, 98, 98);

}

.btn-area:hover{

background-color:rgba(99, 98, 98,0.75);

}

.btn-area a{

padding:1em 0;

}

/* モーダル時に背景を固定 */

body.modal-open {

position:fixed;

width:100%;

padding-right:15px;

}

@media(max-width:767px){

.panel{

margin:0 auto;

}

   $(function(){
     var scrollPosition;
       $('.js-open-modal').on('click', function(){
         scrollPosition = $(window).scrollTop();
            $(this).next().removeClass('disable');
            $('body').addClass('modal-open').css({'top': -scrollPosition});
        });
        $('.js-close-modal').on('click', function(e){
            e.preventDefault();
            $(this).parents('.modal-panel-back').addClass('disable');
            $('body').removeClass('modal-open').css({'top': 0});
          window.scrollTo( 0 , scrollPosition );
        })
        $('.modal-panel-back').on('click', function(){
            $(this).addClass('disable');
            $('body').removeClass('modal-open').css({'top': 0});
          window.scrollTo( 0 , scrollPosition );
        })
   })
$(function(){
       $('.modal-panel').on('click', function(e){
            e.stopPropagation();
        })
   })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

$(function(){

var scrollPosition;

$('.js-open-modal').on('click', function(){

scrollPosition = $(window).scrollTop();

$(this).next().removeClass('disable');

$('body').addClass('modal-open').css({'top': -scrollPosition});

});

$('.js-close-modal').on('click', function(e){

e.preventDefault();

$(this).parents('.modal-panel-back').addClass('disable');

$('body').removeClass('modal-open').css({'top': 0});

window.scrollTo( 0 , scrollPosition );

})

$('.modal-panel-back').on('click', function(){

$(this).addClass('disable');

$('body').removeClass('modal-open').css({'top': 0});

window.scrollTo( 0 , scrollPosition );

})

$(function(){

$('.modal-panel').on('click', function(e){

e.stopPropagation();

})

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル