化妝行模式cliackable

Question

CSS：

<style> 
    #my-div { 
     width:100%; 
     height:100%; 
    } 
    a.fill-div { 
     display: block; 
     height: 100%; 
     width: 100%; 
     text-decoration: none; 
    } 
    </style> 

HTML：

<!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
      <div id="my-div"> 
      <a href="#" class="fill-div">doctor</a> 
      </div> 
      <hr> 
      <div href="#" >click</div> 
      <p> doctor </p> 
    </div> 
      <hr> 
      <span class="glyphicon glyphicon-search"></span><p>pharmacist</p> 
      <hr> 
      <span class="glyphicon glyphicon-store"></span><p>stockist</p> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

     </div> 
    </div> 

我想提出的股利 「填充DIV」 點擊。當我徘徊在div div是cliackable留下一小部分的div .....有沒有更好的方法，使div可點擊和覆蓋整個div？我想讓它像pic.also中的圖片一樣，他們是如何將這個圈子放在evry排的右側的？

enter image description here

Answer 1

#my-div{ border:1px solid red;} 
    a.fill-div { 
     display: block; 

     padding:20px 20px; 
     text-decoration: none; 
    } 

使用填充做到這一點我創建了一個片段，它可以幫助。

#my-div{ border:1px solid red;} 
 
    a.fill-div { 
 
     display: block; 
 

 
     padding:20px 20px; 
 
     text-decoration: none; 
 
    }

<script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script data-cfasync="false" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" id="bsLink"> 
 

 
<!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div id="myModal" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <div id="my-div"> 
 
      <a href="#" class="fill-div">doctor</a> 
 
      </div> 
 
      <hr> 
 
      <div href="#" >click</div> 
 
      <p> doctor </p> 
 
    </div> 
 
      <hr> 
 
      <span class="glyphicon glyphicon-search"></span><p>pharmacist</p> 
 
      <hr> 
 
      <span class="glyphicon glyphicon-store"></span><p>stockist</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div>

Answer 2

由於只有

.panel a#login_pop, .panel a#join_pop { 
 
    border: 2px solid #aaa; 
 
    color: #fff; 
 
    display: block; 
 
    float: right; 
 
    margin-right: 10px; 
 
    padding: 5px 10px; 
 
    text-decoration: none; 
 
    text-shadow: 1px 1px #000; 
 

 
    -webkit-border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -ms-border-radius: 10px; 
 
    -o-border-radius: 10px; 
 
    border-radius: 10px; 
 
} 
 
a#login_pop:hover, a#join_pop:hover { 
 
    border-color: #eee; 
 
} 
 
.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; 
 
} 
 
    .panel a#login_pop, .panel a#join_pop { 
 
    float: left !important; 
 
    } 
 
.overlay:target { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 
.popup { 
 
    background-color: #fff; 
 
    border: 3px solid #fff; 
 
    display: inline-block; 
 
    left: 50%; 
 
    opacity: 0; 
 
    padding: 15px; 
 
    position: fixed; 
 
    text-align: justify; 
 
    top: 40%; 
 
    visibility: hidden; 
 
    z-index: 10; 
 

 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 

 
    -webkit-border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -ms-border-radius: 10px; 
 
    -o-border-radius: 10px; 
 
    border-radius: 10px; 
 

 
    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
 
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
 
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
 
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
 
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
 

 
    -webkit-transition: opacity .5s, top .5s; 
 
    -moz-transition: opacity .5s, top .5s; 
 
    -ms-transition: opacity .5s, top .5s; 
 
    -o-transition: opacity .5s, top .5s; 
 
    transition: opacity .5s, top .5s; 
 
} 
 
.overlay:target+.popup { 
 
    top: 50%; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
.close { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    height: 30px; 
 
    line-height: 30px; 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    top: -15px; 
 
    width: 30px; 
 

 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    -ms-border-radius: 15px; 
 
    -o-border-radius: 15px; 
 
    border-radius: 15px; 
 
} 
 
.close:before { 
 
    color: rgba(255, 255, 255, 0.9); 
 
    content: "X"; 
 
    font-size: 24px; 
 
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9); 
 
} 
 
.close:hover { 
 
    background-color: rgba(64, 128, 128, 0.8); 
 
} 
 
.popup p, .popup div { 
 
    margin-bottom: 10px; 
 
} 
 
.popup label { 
 
    display: inline-block; 
 
    text-align: left; 
 
    width: 120px; 
 
} 
 
.popup input[type="text"], .popup input[type="password"] { 
 
    border: 1px solid; 
 
    border-color: #999 #ccC#ccc; 
 
    margin: 0; 
 
    padding: 2px; 
 

 
    -webkit-border-radius: 2px; 
 
    -moz-border-radius: 2px; 
 
    -ms-border-radius: 2px; 
 
    -o-border-radius: 2px; 
 
    border-radius: 2px; 
 
} 
 
.popup input[type="text"]:hover, .popup input[type="password"]:hover { 
 
    border-color: #555 #888 #888; 
 
}

<!-- panel with buttons --> 
 
     <div class="main"> 
 
      <div class="panel"> 
 
       <a href="#join_form" id="join_pop">Sign Up</a> 
 
      </div> 
 

 
     </div> 
 

 
     <!-- popup form #1 --> 
 
     <a href="#x" class="overlay" id="login_form"></a> 
 
     <div class="popup"> 
 
      <h2>Welcome Guest!</h2> 
 
      <p>Please enter your login and password here</p> 
 
      <div> 
 
       <label for="login">Login</label> 
 
       <input type="text" id="login" value="" /> 
 
      </div> 
 
      <div> 
 
       <label for="password">Password</label> 
 
       <input type="password" id="password" value="" /> 
 
      </div> 
 
      <input type="button" value="Log In" /> 
 

 
      <a class="close" href="#close"></a> 
 
     </div> 
 

 
     <!-- popup form #2 --> 
 
     <a href="#x" class="overlay" id="join_form"></a> 
 
     <div class="popup"> 
 
      <h2>Sign Up</h2> 
 
      <p>Please enter your details here</p> 
 
      <div> 
 
       <label for="email">Login (Email)</label> 
 
       <input type="text" id="email" value="" /> 
 
      </div> 
 
      <div> 
 
       <label for="pass">Password</label> 
 
       <input type="password" id="pass" value="" /> 
 
      </div> 
 
      <div> 
 
       <label for="firstname">First name</label> 
 
       <input type="text" id="firstname" value="" /> 
 
      </div> 
 
      <div> 
 
       <label for="lastname">Last name</label> 
 
       <input type="text" id="lastname" value="" /> 
 
      </div> 
 
      <input type="button" value="Sign Up" />&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Log In</a> 
 

 
      <a class="close" href="#close"></a> 
 
     </div> 
 

簡單的CSS

Answer 3

感謝名單傢伙所有幫助！我經過一番嘗試後得到了它！下面是代碼！

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-glyphicons.css" rel="stylesheet"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <style> 
     #my-div { 
      width:100%; 
      height:100%; 
     } 
     a.fill-div { 
      display: block; 
      padding-top:10px; 
      padding-bottom:10px; 
      margin-bottom:-14px; 
      margin-top:-14px; 
      height: 100%; 
      width: 100%; 
      text-decoration: none; 
     } 
     </style> 

    </head> 
    <body> 

    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
      <p>Some text in the modal.</p> 
      <hr> 
       <div id="my-div"> 
       <a href="#" class="fill-div"><span class="glyphicon glyphicon-road"></span>doctor</a> 
       </div> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

     </div> 
    </div> 

     <script> 


     </script> 

     </body> 
    </html> 

如果有人在tryinh後在某些瀏覽器中出現錯誤，請通知！ 也改變填充，看看它是否適合你！ thanx傢伙...乾杯！