在Jquery上調用Div Modal

Question

我做了一個Modal，它由一些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的顯示屬性，而不是不透明的，用於切換模態。 例子：

<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>