Question

我试图将弹出窗口与齿轮按钮合并。一旦按下齿轮按钮，就会出现一个弹出窗口。

这是css的一部分

.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}

演示http://jsfiddle.net/bxaU5/19/

Answer 1

<button href='#login_form' onclick="showpopup();" class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext"></button>
<div class="overlay" id="login_form">
<div class="popup">
<h2>IP Settings</h2>
<p>Please enter IP Address and port number here</p>
<div>
</div>
<label>IP Address:</label>
<input type="text" id="IP"/>
</div>
<div>
<label>Port:</label>
<input type="number" min="1000" max="9999" id="Port"/>
</div>
<input type="submit" class="Sync" value="Sync"/>
<input type="reset" class="Clear" value="Clear" />
<a class="close" href="#close"></a>
</div>

添加javascript功能

function showpopup(){
    document.getElementById("login_form").className  += ":target";
}

在这里演示http://jsfiddle.net/bxaU5/24/

一旦按下按钮，弹出窗口就不会出现

1 个答案: