具有无边框形式的模态弹出窗口

时间：2017-06-16 07:05:10

标签： javascript jquery html css3 twitter-bootstrap-3

＆＃13;
＆＃13; 
document.addEventListener('click', function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;

    e.preventDefault();

    if (target.hasAttribute('data-toggle') && target.getAttribute('data-toggle') == 'modal') {
        if (target.hasAttribute('data-target')) {
            var m_ID = target.getAttribute('data-target');
            document.getElementById(m_ID).classList.add('open');
        }
    }

    // Close modal window with 'data-dismiss' attribute or when the backdrop is clicked
    if ((target.hasAttribute('data-dismiss') && target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
        var modal = document.querySelector('[class="modal open"]');
        modal.classList.remove('open');
    }
}, false);
＆＃13; 
.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    overflow: auto;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.modal-window {
    position: relative;
    background-color: #FFFFFF;
    width: 80%;
    margin: 10% auto;
    padding: 20px;
}

.modal-window.small {
    width: 30%;
}

.modal-window.large {
    width: 75%;
}

.close {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(0,0,0,0.3);
    height: 30px;
    width: 30px;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
}

.close:hover,
.close:focus {
    color: #000000;
    cursor: pointer;
}

.open {
    display: block;
}


.form-group .form-control {
    border: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
    -webkit-background-size: 0 2px, 100% 1px;
    background-size: 0 2px, 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom, center -webkit-calc(100% - 1px);
    background-position: center bottom, center calc(100% - 1px);
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: background 0s ease-out;
    -o-transition: background 0s ease-out;
    transition: background 0s ease-out;
    float: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button class="btn btn-round btn-info1" data-target="modal" data-toggle="modal">DONATE</button>

<div id="modal" class="modal">
                <div class="modal-window">
                    <span class="close" data-dismiss="modal">&times;</span>
                    <h2 class="text-center">Bank Details</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <p class="text-color"><span class="text-muted">Name of Account:</span> Shyamchi Aai Foundation</p>
                            <p class="text-color"><span class="text-muted">Account Number:</span> 913010042120913</p>
                            <p class="text-color"><span class="text-muted">IFSC Code:</span> UTIB0000104</p>
                            <p class="text-color"><span class="text-muted">Bank Address:</span> Business Square Plot No-57, Mayur Colony, Next To Jog High School, Kothrud</p>
                        </div>
                        <div class="col-md-6">
                            <p class="text-color"><span class="text-muted">Bank Name:</span> Axis Bank Ltd.</p>
                            <p class="text-color"><span class="text-muted">Account type:</span> SB-TRUST/SOCIETY/NGO/GOVT</p>
                            <p class="text-color"><span class="text-muted">MICR Code:</span> 411211004</p>
                            <p class="text-color"><span class="text-muted">Branch:</span> KOTHRUD</p><br><br>
                        </div>
                    </div>
                    <div class="row text-center">
                        <h2>Donor Details</h2>
                        <div class="col-md-12">
                            <form>
                                <div class="col-md-6 form-group">
                                    <input type="text" class="form-control" placeholder="Name" name="Name">
                                </div>
                                <div class="col-md-6 form-group">
                                    <input type="text" class="form-control" placeholder="Phone" name="Phone">
                                </div>
                                <div class="col-md-12 form-group">
                                    <input type="text" class="form-control" placeholder="Address" name="Address">
                                </div>
                                <div class="col-md-6 form-group">
                                    <input type="text" class="form-control" placeholder="PAN" name="PAN">
                                </div>
                                <div class="col-md-6 form-group">
                                    <input type="email" class="form-control" placeholder="Email" name="Email">
                                </div>
                                <div class="col-md-6 form-group">
                                    <input type="text" class="form-control" placeholder="Amount" name="Amount">
                                </div>
                                <div class="col-md-6 form-group">
                                    <input type="text" class="form-control" placeholder="Purpose" name="Purpose">
                                </div>
                                <div>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="">Cheque
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="">NEFT
                                </label>
                                </div>
                                <button type="submit" class="btn btn-danger btn-round">SUBMIT</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
＆＃13;
＆＃13;
＆＃13;

design for the modal popup 弹出模式代码它在我的系统上工作正常我在这里发布了正确的代码。我的问题是关于CSS，我想设计与图像中显示的相同的页面。但没有得到正确的效果像复选框没有选择，文本不是适当的布局等......

1 个答案:

答案 0 :(得分：0)

你可能不会使用它＆＃39; border＆＃39;所以＆＃39;模型＆＃39;没有边界。

相关问题
最新问题