如何使用按钮在新窗口中打开html应用程序？

Question

代码在这里！：https://ghostbin.com/paste/xmxg8

如何使按钮在同一屏幕上的新窗口中打开我的日历程序？

Answer 1

您可以使用Javascript/jQuery。

最初设置display:none用于包含日历的div。

添加html元素->向其添加脚本，如onClick it 切换显示:none

修改后的守则：

​

$(document).ready(function(){
      $('#start').click(function(){
            $('#cal').show();
            $('#start').hide();
            $('#close').show();
      });
      
       $('#close').click(function(){
            $('#cal').hide();
            $('#start').show();
            $('#close').hide();
      });
});

* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}


#cal{
 display:none;
}

	#start{
  				font-size:26px; 
  				padding: 20px 30px;
  				background-color:#1abc9c;
				-webkit-border-radius: 6px; 
				-moz-border-radius: 6px; 
				position: relative;
				border: 1px solid #34495e;

  			}
        #start:hover{
  				cursor:pointer;
  			}
        
    	#close{
  				font-size:26px; 
  				padding: 20px 30px;
  				background-color:#1abc9c;
				-webkit-border-radius: 6px; 
				-moz-border-radius: 6px; 
				position: relative;
				border: 1px solid #34495e;
        
        display:none;

  			}
        #close:hover{
  				cursor:pointer;
  			}    
        
.month {
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    float: left;
    padding-top: 10px;
}

.month .next {
    float: right;
    padding-top: 10px;
}

.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #ddd;
}

.weekdays li {
    display: inline-block;
    width: 13.6%;
    color: #666;
    text-align: center;
}

.days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

.days li .active {
    padding: 5px;
    background: #1abc9c;
    color: white !important
}

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<span id="start">Open Calender</span>

<span id="close">Close Calender</span>
<br/>
<div id="cal">
    <h1>Venue Calendar</h1>

    <div class="month">
      <ul>
        <li class="prev">❮</li>
        <li class="next">❯</li>
        <li style="text-align:center">
          August<br>
          <span style="font-size:18px">2016</span>
        </li>
      </ul>
    </div>

    <ul class="weekdays">
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
      <li>Sun</li>
    </ul>

    <ul class="days">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li><span class="active">10</span></li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
    </ul>

</div>

​

https://jsfiddle.net/djsreeraj/L3ubh8tz/2/