Question

我自己制作了一个由一些css和div组成的模态。我有一个验证，当我的验证通过时如何调用我的div模式？这是我的模态

<!-- Start Modal -->
                    <div id="openModal" class="modalDialog">
                        <div>
                                <a href="#close" title="Close" class="close">X</a>
                                <table class="table">
                                    <tr>
                                        <th>Last Name</th>
                                        <td id="modal_lastname"></td>
                                    </tr>
                                    <tr>
                                        <th>First Name</th>
                                        <td id="modal_firstname"></td>
                                    </tr>
                                    <tr>
                                        <th>Island</th>
                                        <td id="modal_island"></td>
                                    </tr>
                                    <tr>
                                        <th>Region</th>
                                        <td id="modal_region"></td>
                                    </tr>
                                    <tr>
                                        <th>Province</th>
                                        <td id="modal_province"></td>
                                    </tr>
                                    <tr>
                                        <th>City</th>
                                        <td id="modal_city"></td>
                                    </tr>
                                    <tr>
                                        <th>Barangay</th>
                                        <td id="modal_barangay"></td>
                                    </tr>
                                    <tr>
                                        <th>Address</th>
                                        <td id="modal_address"></td>
                                    </tr>
                                    <tr>
                                        <th>Gender</th>
                                        <td id="modal_gender"></td>
                                    </tr>
                                    <tr>
                                        <th>Birthdate</th>
                                        <td id="modal_birthdate"></td>
                                    </tr>
                                </table>

                                <div class="modal-footer">
                                    <input type="submit" id="submit" name="btn" value="Submit" class="btn btn-success" />
                                </div>
                        </div>
                    </div>    
                    <!-- End Modal -->

我的验证。基本上我想在“其他”之后调用我的模型

<script type="text/javascript">
function checkFields()
{ 
    var a=$('#lastname').val();
    var b=$('#firstname').val();
    var c=$('#island').val();
    var d=$('#region').val();
    var e=$('#province').val();
    var f=$('#city').val();
    var g=$('#barangay').val();
    var h=$('#address').val();
    var i=$('#gender').val();
    var j=$('#birthdate').val();

    if (a==null || a=="", b==null || b=="", c==null || c=="", d==null || d=="", e==null || e=="", f==null || f=="", g==null || g=="", h==null || h=="", i==null || i=="", j==null || j=="")
    {
      //alert("Please Fill All Required Field");
      return false;
    }
    else
       //I want to call my Modal here
}
</script>

这是我的CSS

<style type="text/css">


.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;

}

.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
</style>

Answer 1

我建议使用css display属性而不是opacity来切换模态。例如：

<script type="text/javascript">
function checkFields()
{ 
    var a=$('#lastname').val();
    var b=$('#firstname').val();
    var c=$('#island').val();
    var d=$('#region').val();
    var e=$('#province').val();
    var f=$('#city').val();
    var g=$('#barangay').val();
    var h=$('#address').val();
    var i=$('#gender').val();
    var j=$('#birthdate').val();

    if (a==null || a=="", b==null || b=="", c==null || c=="", d==null || d=="", e==null || e=="", f==null || f=="", g==null || g=="", h==null || h=="", i==null || i=="", j==null || j=="")
    {
      //alert("Please Fill All Required Field");
      return false;
    }
    else
       $("#openModal").show();
}
</script>

Css（如果你愿意，你可以保持一定的不透明度）：

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0.8;
display: none;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

这样你就可以：

$(".close").click(function() {
     $("#openModal").hide();
});

Answer 2

有点难以得到你所要求的东西。特别是没有CSS。试试这个：

<script type="text/javascript">
function checkFields()
{ 
    var a=$('#lastname').val();
    var b=$('#firstname').val();
    var c=$('#island').val();
    var d=$('#region').val();
    var e=$('#province').val();
    var f=$('#city').val();
    var g=$('#barangay').val();
    var h=$('#address').val();
    var i=$('#gender').val();
    var j=$('#birthdate').val();

    if (a==null || a=="", b==null || b=="", c==null || c=="", d==null || d=="", e==null || e=="", f==null || f=="", g==null || g=="", h==null || h=="", i==null || i=="", j==null || j=="")
    {
      //alert("Please Fill All Required Field");
      return false;
    }
    else
        $('#modal_lastname').html(a);
        $('#modal_firstname').html(b);
        $('#modal_island').html(c);
        $('#modal_region').html(d);
        $('#modal_province').html(e);
        $('#modal_city').html(f);
        $('#modal_barangay').html(g);
        $('#modal_address').html(h);
        $('#modal_gender').html(i);
        $('#modal_birthdate').html(j);


        $(".modalDialog").css("opacity":"1.0");
}
</script>

在Jquery上调用Div模态

2 个答案: