如何使用javascript彈出div關閉按鈕並通過javascript刪除div

Question

我已經向您尋求幫助。

1）我已經通過javascript將彈出式div放入HTML頁面。 這是網站。 如果單擊編輯圖標（在網頁的右側和中心），將出現一個彈出框。 如果單擊該彈出框的外部，它將關閉。 我在彈出窗口中放置一個關閉圖標。 我想當任何人單擊該關閉圖標時，彈出框也將關閉。 我也為此放了一個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');
    }
}

它將搜索單擊的按鈕的索引並刪除相應的文章。

如何使用javascript彈出div關閉按鈕並通過javascript刪除div

問題描述

1 個解決方案

解決方案1
0 2013-05-05 14:29:46

如何使用javascript彈出div關閉按鈕並通過javascript刪除div

問題描述

1 個解決方案

解決方案1 0 2013-05-05 14:29:46

解決方案1
0 2013-05-05 14:29:46