如何JavaScript彈出div關閉按鈕工作和div刪除javascript

Question

我已經與你一起幫助2。

1）我把一個彈出div到我的HTML頁面的JavaScript。這裏是website。如果您點擊編輯圖標（在網頁的右側和中間），會出現一個彈出框。如果您單擊該彈出框的外部，它將關閉。我從彈出窗口中放了一個關閉圖標。我想要任何人點擊那個關閉圖標時，彈出框也會關閉。我也爲此提供了一個JavaScript。但是，當我單擊關閉圖標時，彈出框將關閉，但透明背景（div class =「dimmer」）仍將保留，除非單擊窗口的任何一側。我該如何解決這個問題？

2）您會看到有兩個部分的作業詳細信息列表。還有一個刪除圖標。我希望當我點擊刪除圖標時，該刪除圖標旁邊的div將被刪除。我怎樣才能做到這一點的JavaScript？

必要的HTML代碼：

<div class="wrapper"> 
     <header class="page_title"> 
      <h1>All Jobs</h1> 
     </header> 
     <article class="information"> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>Job ID</th> 
         <th>Start Date</th> 
         <th>Deadline</th> 
         <th>Finish Date</th> 
         <th>Budget($)</th> 
         <th>Client ID</th> 
         <th>Bidder ID</th> 
         <th>Number of Supervisor</th> 
         <th>Name of Supervisor</th> 
         <th>Odesk Profile ID</th> 
         <th>Owner Type</th> 
         <th class="icon"> 

          <a href="#"><img src="images/edit-icon.jpg" width="41" height="39" alt="Edit" title="Edit Job" class="icon_first" id="opener" /></a> 
          <a href="#"><img src="images/delete.png" width="41" height="39" alt="Delete" title="Delete Job" /></a> 

         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>1</td> 
         <td>06/05/2013</td> 
         <td>11/05/2013</td> 
         <td>10/05/2013</td> 
         <td>100</td> 
         <td>John_01</td> 
         <td>abid</td> 
         <td>2</td> 
         <td> 
          1. Dolar 
          2. Soshi 
         </td> 
         <td> 
          <a href="#">See the job at Odesk</a>          
         </td> 
         <td>Member</td> 
        </tr> 
       </tbody> 
      </table> 
      <div id="lightbox"> 
       <section id="form"> 
        <header class="titlebar"> 
         <a href="#"><img src="images/close-icon.png" width="33" height="32" alt="close" title="Close" id="closer" class="close" /></a> 
         <h1>Edit Form</h1> 

        </header> 
        <form id="form" name="form" method="post" action="#"> 
         <label>Job ID:</label> 
         <input type="text" name="job_id" id="job_id" placeholder="1" /> 
         <label>Start Date:</label> 
         <input type="date" name="start_date" id="start_date" placeholder="mm/dd/yy"> 
         <label>Deadline:</label> 
         <input type="date" name="deadline" id="deadline"> 
         <label>Finish Date:</label> 
         <input type="date" name="finish_date" id="finish_date"> 
         <label>Budget($):</label> 
         <input type="number" name="Budget" id="Budget" placeholder="100"> 
         <label>Client ID:</label> 
         <input type="text" name="client_id" id="client_id" placeholder="1" /> 
         <label>Bidder ID:</label> 
         <input type="text" name="bidder_id" id="bidder_id" placeholder="1" /> 
         <label>Number of Supervisor:</label> 
         <select title="Supervisor"> 
          <option>1</option> 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
         </select> 
         <label>Odesk Profile ID:</label> 
         <input type="text" name="odesk_id" id="odesk_id" placeholder="https://www.odesk.com/jobs/Frontend-engineer"> 
         <label>Owner Type:</label> 
         <input type="radio" name="owner_type" id="owner_type" value="member" /><label class="text_label">Member</label> 
         <input type="radio" name="owner_type" id="owner_type" value="employee" /><label class="text_label">Employee</label> 
         <div class="clear"></div> 
         <input type="submit" name="submit" id="submit" value="Submit"> 
        </form> 
       </section> 
      </div> 
     </article> 
     <article class="information"> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>Job ID</th> 
         <th>Start Date</th> 
         <th>Deadline</th> 
         <th>Finish Date</th> 
         <th>Budget($)</th> 
         <th>Client ID</th> 
         <th>Bidder ID</th> 
         <th>Number of Supervisor</th> 
         <th>Name of Supervisor</th> 
         <th>Odesk Profile ID</th> 
         <th>Owner Type</th> 
         <th class="icon"> 

          <a href="#"><img src="images/edit-icon.jpg" width="41" height="39" alt="Edit" title="Edit Job" class="icon_first" /></a> 
          <a href="#"><img src="images/delete.png" width="41" height="39" alt="Delete" title="Delete Job" /></a> 

         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>1</td> 
         <td>06/05/2013</td> 
         <td>11/05/2013</td> 
         <td>10/05/2013</td> 
         <td>100</td> 
         <td>John_01</td> 
         <td>abid</td> 
         <td>2</td> 
         <td> 
          1. Dolar 

         </td> 
         <td> 
          <a href="#">See the job at Odesk</a>          
         </td> 
         <td>Member</td> 
        </tr> 
       </tbody> 
      </table> 
     </article> 
    </div> 

必要的CSS代碼：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    border: 0 none; 
    font-size: 100%; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 
a { 
    text-decoration: none; 
} 

.clear { clear: both; } 
/*html5 display rule*/ 
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary { 
    display: block; 
} 

h1 { 
    font-size: 26px;  
} 

body { 
    background: #fff; 
    font-family: sans-serif; 
    color: #333; 
    font-size: 12px; 
    line-height: 1em; 
} 
.wrapper { 
    width: 1000px; 
    margin: 0 auto; 
    position: relative; 
    background: #fff; 
} 

header.page_title { 
    background: #F2F2F0; 
    border-radius: 7px 7px 7px 7px; 
    color: #333; 
    padding: 20px; 
    margin: 20px 0 0 0; 
} 
#form { 
    width: 800px; 
    margin: 20px 0 0 2px; 
} 
#form label { 
    display: block; 
    text-align: left; 
    width: 200px; 
    float:left; 
    margin: 5px 0 0 20px; 
    font-size: 15px; 
} 
#form label.text_label { 
    width: auto; 
    display: inline; 
    margin: 5px 20px 15px 10px; 
} 
#form input, #form select { 
    float:left; 
    font-size:13px; 
    margin: 0 0 10px 0; 
    padding: 0; 
} 
#form input[type=text], #form input[type=date], #form input[type=number], #form input[type=email] { 
    width: 500px; 
    height: 27px; 
} 
#form select { 
    width: 500px; 
    height: 27px; 
    line-height: 27px; 
    padding: 3px 0 0 0; 
} 
#form input[type="radio"] { 
    margin: 5px 0 0 0; 
} 
#form textarea { 
    float: left; 
    width: 500px; 
    height: 82px; 
    margin: 0 0 10px 0; 
    padding: 0; 
    font-size: 13px; 
} 
#form input[type="submit"] { 
    margin: 10px 0 20px 220px; 
    width: 100px; 
    height: 30px; 
    background: #00AEEC; 
    text-align: center; 
    line-height: 30px; 
    color: #FFFFFF; 
    font-size: 13px; 
    font-weight: bold; 
    border: none; 
    box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), 0 1px 0 #9FE662 inset; 
    border-radius: 5px; 
    cursor: pointer; 
} 
#form input[type="submit"]:hover { 
    background: #33BEF0; 
} 

article.information { 
    position: relative; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    float: left; 
} 
.table { 
    font-family: sans-serif; 
    font-size: 13px; 
    margin: 25px 0 0 0; 
    width: 700px; 
    text-align: center; 
    border-collapse: collapse; 
    border-spacing: 0; 
    float: left; 
} 
.table th { 
    font-size: 13px; 
    font-weight: normal; 
    padding: 10px 15px; 
    border-right: 1px solid #EDEDEB; 
    border-left: 1px solid #EDEDEB; 
    color: #042D40; 
    background: #F2F2F0; 
} 
.table td { 
    padding: 10px 5px; 
    border-right: 1px solid #EDEDEB; 
    border-left: 1px solid #EDEDEB; 
    border-bottom: 1px solid #EDEDEB; 
    color: #669; 
} 
.table a { 
    color: #669; 
} 
.table a:hover { 
    color: #009; 
} 
.icon { 
    float: right; 
    width: 130px; 
} 
.table th.icon { 
    clear: both; 
    background: #fff; 
    margin: 0; 
    padding: 0; 
    border: none; 
} 

.icon img { 
    float: left;  
} 
.icon_first { 
    margin: 0 10px 0 10px; 
} 

#lightbox{ 
    visibility: hidden; 
    position: absolute; 
    background: #fff; 
    border: 1px solid rgba(0, 0, 0, 0.13); 
    border-radius: 11px 11px 10px 10px; 
    box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.13); 
    color: #333; 
    z-index:100; 
    width: 800px; 
    float: left; 
    top: 0; 
    left: 100px; 
} 

.dimmer{ 
    background: #000; 
    position: absolute; 
    opacity: .5; 
    top: 0; 
    z-index:99; 
} 
#lightbox .titlebar { 
    background-color: #00AEEC; 
    border-radius: 10px 10px 0 0; 
    box-shadow: 0 0 0 1px #00AEEC; 
    color: #FFFFFF; 
    font-size: 18px; 
    padding: 17px 20px 13px; 
    margin: -20px 0 0 -3px; 
    width: 95.2%; 
} 
#lightbox .close { 
    float: right; 
    margin: -10px 10px 0 0; 
} 

JavaScript代碼：

var opener = document.getElementById("opener"); 
var lightbox = document.getElementById("lightbox"); 


opener.onclick = function(){ 

    var lightbox = document.getElementById("lightbox"), 
     dimmer = document.createElement("div"); 

    dimmer.style.width = window.innerWidth + 'px'; 
    dimmer.style.height = window.innerHeight + 'px'; 
    dimmer.className = 'dimmer'; 

    dimmer.onclick = function(){ 
     document.body.removeChild(this); 
     lightbox.style.visibility = 'hidden'; 
    } 

    document.body.appendChild(dimmer); 

    lightbox.style.visibility = 'visible'; 

    return false; 
} 


var closer = document.getElementById("closer"); 
closer.onclick = function closepopup() 
{ 
    lightbox.style.visibility = 'hidden'; 

} 

Answer 1

你動態地添加黑DIV體內。您的代碼在您點擊它時將其刪除，但當您點擊「更近」時，您不會刪除它。

添加本就接近點擊：

document.body.removeChild(document.getElementsByClassName('dimmer')[0]); 

2）爲了您刪除的東西，你需要添加以下代碼：

var deleteBtn = document.getElementsByClassName('yourClass'); 
for(var i = 0; i < deleteBtn.length; i++) { 
    var btn = deleteBtn[i]; 
    btn.onclick = function() { 
     for (var k=0; k < deleteBtn.length; k++){ 
      if(this == deleteBtn[k]){ 
       break; 
      } 
     } 


     var wrapper = document.getElementsByClassName('wrapper')[0]; 
     var target = wrapper.getElementsByTagName('article'); 
     wrapper.removeChild(target[k]) 

     deleteBtn = document.getElementsByClassName('yourClass'); 
    } 
} 

它將搜索點擊的按鈕的索引和刪除各自的文章。