Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <form method="post" name="testform" action="#">
- <a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
- <input readonly type="text" name="txt1" placeholder="inputTest">
- </a>
- <div class="modalwrapper" id="modal"> <!-- modal -->
- <div class="modalcontainer">
- <div class="modalcol1">
- <label>Test 1</label>
- <input type="checkbox" name="test_modal[]" value="1">
- <div class="clear"></div>
- <label>Test 2</label>
- <input type="checkbox" name="test_modal[]" value="2">
- <div class="clear"></div>
- <label>Test 3</label>
- <input type="checkbox" name="test_modal[]" value="3">
- <div class="clear"></div>
- <label>Test 4</label>
- <input type="checkbox" name="test_modal[]" value="4">
- <div class="clear"></div>
- <label>Test 5</label>
- <input type="checkbox" name="test_modal[]" value="5">
- <div class="clear"></div>
- <div class="savebutton">
- <button class="btn1" type="button" value="Submit">Submit</button>
- </div>
- </div> <!-- close modalcol1 -->
- </div> <!-- close modalcontainer -->
- <div class="overlay"></div>
- </div> <!-- close modalwrapper -->
- </form>
- /* modal layout */
- .modalwrapper {
- top: 0;
- left: 0;
- opacity: 0;
- position: absolute;
- visibility: hidden;
- box-shadow: 0 3px 7px rgba(0,0,0,.25);
- box-sizing: border-box;
- transition: all .4s ease-in-out;
- -webkit-transition: all .4s ease-in-out;
- -moz-transition: all .4s ease-in-out;
- }
- .modalwrapper:target {
- opacity: 1;
- visibility: visible
- }
- .overlay {
- background-color: #000;
- background: rgba(0,0,0,.8);
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 1;
- }
- .modalcontainer {
- display: table;
- background-color: #777;
- position: relative;
- z-index: 100;
- color: #fff;
- padding: 5px;
- }
- .modalcol1 { display: table-cell; }
- .clear { clear: both; }
- .modalwrapper input[type=checkbox] {
- float: right;
- margin-right: 20px;
- }
- .savebutton input[type=submit] {
- float: right;
- background-color: maroon;
- color: #fff;
- border: none;
- padding: 5px 10px;
- margin-top: 5px;
- margin-right: 20px;
- }
- /* modal layout ends here */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement