2 Replies - 521 Views - Last Post: 27 May 2015 - 11:59 PM

#1 Desertt   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 182
  • Joined: 27-October 13

Changing label Modal to button

Posted 27 May 2015 - 10:58 PM

Hi i'm using this code for a simple popup
 <div>
     <p>
     <label class="btn" for="modal-3">Show me modal with a cat</label>

   </p>
   <input class="modal-state" id="modal-3" type="checkbox" />
    <div class="modal">
    <label class="modal__bg" for="modal-3"></label>
    <div class="modal__inner">
    <label class="modal__close" for="modal-3"></label>
   <h2>Sleppy sloth</h2>
   <p><img src="http://i.imgur.com/TPx9zYo.gif" alt="" />Not like all of these</p>
   </div>
  </div>
     </div>



and here the style sheet
         <style>
                        /* [Object] Modal
                        * =============================== */
                          .modal {
                          opacity: 0;
                          visibility: hidden;
                          right: 0;
                          bottom: 0;
                          left: 0;
                          text-align: left;
                          background: rgba(0,0,0, .9);
                          transition: opacity .25s ease;
                        }

                        .modal__bg {
                          position: absolute;
                          top: 0;
                          right: 0;
                          bottom: 0;
                          left: 0;
                          cursor: pointer;
                        }

                        .modal-state {
                          display: none;
                        }

                        .modal-state:checked + .modal {
                          opacity: 1;
                          visibility: visible;
                        }

                        .modal-state:checked + .modal .modal__inner {
                          top: 0;
                        }

                        .modal__inner {
                          transition: top .25s ease;
                          position: absolute;
                          top: -20%;
                          right: 0;
                          bottom: 0;
                          left: 0;
                          width: 50%;
                          margin: auto;
                          overflow: auto;
                          background: #fff;
                          border-radius: 5px;
                          padding: 1em 2em;
                          height: 50%;
                        }

                        .modal__close {
                          position: absolute;
                          right: 1em;
                          top: 1em;
                          width: 1.1em;
                          height: 1.1em;
                          cursor: pointer;
                        }

                        .modal__close:after,
                        .modal__close:before {
                          content: '';
                          position: absolute;
                          width: 2px;
                          height: 1.5em;
                          background: #ccc;
                          display: block;
                          transform: rotate(45deg);
                          left: 50%;
                          margin: -3px 0 0 -1px;
                          top: 0;
                        }

                        .modal__close:hover:after,
                        .modal__close:hover:before {
                          background: #aaa;
                        }

                        .modal__close:before {
                          transform: rotate(-45deg);
                        }

                        @media screen and (max-width: 768px) {

                          .modal__inner {
                            width: 90%;
                            height: 90%;
                            box-sizing: border-box;
                          }
                        }


                        /* Other
                         * =============================== */
                        body {
                          padding: 1%;
                          font: 1/1.5em sans-serif;
                          text-align: center;
                        }

                        .btn {
                          cursor: pointer;
                          background: #27ae60;
                          display: inline-block;
                          padding: .5em 1em;
                          color: #fff;
                          border-radius: 3px;
                        }

                        .btn:hover,
                        .btn:focus {
                          background: #2ecc71;
                        }

                        .btn:active {
                          background: #27ae60;
                          box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;
                        }

                        .btn--blue {
                          background: #2980b9;
                        }

                        .btn--blue:hover,
                        .btn--blue:focus {
                          background: #3498db;
                        }

                        .btn--blue:active {
                          background: #2980b9;
                        }

                        p img {
                          max-width: 200px;
                          height: auto;
                          float: left;
                          margin: 0 1em 1em 0;
                        }
                        </style>



i try to change the first line i replace
    <label class="btn" for="modal-3">Show me modal with a cat</label>


into
    <input type="button" class="btn" for="modal-3" value="Show me modal with a cat" />


But the pop stop working i tried to manipulate some in the css from this original
    .modal-state:checked + .modal {
     opacity: 1;
     visibility: visible;
     }

     .modal-state:checked + .modal .modal__inner {
     top: 0;
     }


into
    .modal-state:clicked + .modal {
     opacity: 1;
     visibility: visible;
     }

     .modal-state:clicked + .modal .modal__inner {
     top: 0;
     }   


but still not working how can i change the css to make it work on button click not on label or checkbox which it's visibility is hidden and the checkbox is which display the popup windows and how can i set height to be auto or to expand as the text size in it I tried to set height to auto but then the height displayed on all the windows

Any help

Is This A Good Question/Topic? 0
  • +

Replies To: Changing label Modal to button

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4244
  • View blog
  • Posts: 13,449
  • Joined: 08-June 10

Re: Changing label Modal to button

Posted 27 May 2015 - 11:25 PM

note on semantics: it doesn’t make sense to use a label as button (equivalent). for that there is the <button> element.
Was This Post Helpful? 0
  • +
  • -

#3 Desertt   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 182
  • Joined: 27-October 13

Re: Changing label Modal to button

Posted 27 May 2015 - 11:59 PM

As i mention that i used the button element but the popup did not work
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1