0

我来找你2个帮助。

1) 我已经通过 javascript 在我的 HTML 页面中添加了一个弹出 div。这是网站。如果您点击编辑图标（在网页的右侧和中心），将出现一个弹出框。如果单击该弹出框的外部，它将关闭。我在弹出窗口中放了一个关闭图标。我希望当有人单击该关闭图标时，弹出框也会关闭。我也为此放了一个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';

}
4

1 回答 1

0

您在正文中动态添加黑色 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');
    }
}

它将搜索单击按钮的索引并删除相应的文章。

于 2013-05-05T14:29:46.673 回答