ボタンをクリックしてモーダルを作成する方法

Question

ボタンをクリックするとプロパティIDを取得し、APIを渡すとプロパティの詳細が表示され、結果は私のモーダルに表示されます、ここで私がクリックした場合は表示し、非表示にする必要が私はこの方法

// Property View 
 
$(document).on('click', '.prlstbtn_view_btn', function() { 
 
    id = $(this).closest('tr').find('.myHidden').val(); 
 
    console.log(id); 
 
    viewproperty_modal(id); 
 
}); 
 

 
function viewproperty_modal(property_id) { 
 
    htmlString = ""; 
 
    
 
    $.ajax({ 
 
    url: 'http://www.example.com/properties/' + property_id, 
 
    type: 'GET', 
 
    contentType: 'application/json; charset=utf-8', 
 
    success: function(viewresult) { 
 
     console.log(viewresult); 
 
     $.each(result, function(key, p_typevalue) { 
 
     htmlString += '<div id="viewproperty" class="modal fade" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">View Property Details</h4></div><div class="modal-body"><div class="row"> <label class="col-md-4" id="head">Name:</label> <label class="col-md-8">Rashmita Das</label></div><div class="row"><label class="col-md-4" id="head">Email Address:</label> <label class="col-md-8">das76rashmita.gmail.com</label></div><div class="row"><label class="col-md-4" id="head">Mobile Number:</label> <label class="col-md-8">77751068862</label></div><div class="row"><label class="col-md-4" id="head"> Property Type:</label> <label class="col-md-8">Apartment</label></div><div class="row"> <label class="col-md-4" id="head">Listed For:</label> <label class="col-md-8">SALE</label></div><div class="row"> <label class="col-md-4" id="head">Country Name:</label> <label class="col-md-8">India</label></div><div class="row"> <label class="col-md-4" id="head">State Name:</label> <label class="col-md-8">Karnataka</label></div><div class="row"> <label class="col-md-4" id="head">City Name:</label> <label class="col-md-8">Bengalore</label></div><div class="row"> <label class="col-md-4" id="head">Property Name:</label> <label class="col-md-8">3 BHK Apartment In Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line1:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line2:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Pincode:</label> <label class="col-md-8">560037</label></div><div class="row"> <label class="col-md-4" id="head">Block No:</label> <label class="col-md-8">8TH Block</label></div><div class="row"> <label class="col-md-4" id="head">House No:</label> <label class="col-md-8">10</label></div><div class="row"> <label class="col-md-4" id="head">Built Up Area:</label> <label class="col-md-8">200 sqft</label></div><div class="row"> <label class="col-md-4" id="head">No of Bedrooms:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">No of Bathrooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of Balconies/Sitouts:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of other Rooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">Monthly rent:</label> <label class="col-md-8">1000000</label></div> <div class="row"> <label class="col-md-4" id="head">Security deposit amount :</label> <label class="col-md-8">100000</label></div><div class="row"> <label class="col-md-4" id="head">Maintenance Charges:</label> <label class="col-md-8">10000</label></div><div class="row"> <label class="col-md-4" id="head">Property Ready for Possession:</label> <label class="col-md-8">02/01/2017</label></div><div class="row"> <label class="col-md-4" id="head">Construction of Your Property:</label> <label class="col-md-8">1009</label></div><div class="row"> <label class="col-md-4" id="head">Type of Ownership:</label> <label class="col-md-8">Freehold</label></div><div class="row"> <label class="col-md-4" id="head">Total Floors:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">Property Face Type:</label> <label class="col-md-8">North</label></div><div class="row"> <label class="col-md-4" id="head">Bachelor Allowed:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Non-Vegetarians Allowed:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Pets Allowed:</label> <label class="col-md-8">4</label></div><div class="row"> <label class="col-md-4" id="head">Carpet Area:</label> <label class="col-md-8">2400 sqft</label></div><div class="row"> <label class="col-md-4" id="head">Property Status:</label> <label class="col-md-8">Ready to move in</label></div><div class="row"> <label class="col-md-4" id="head">separate dining space:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Servant Accommodation:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Furnishing:</label> <label class="col-md-8">Fully Furnished </label></div><div class="row"> <label class="col-md-4" id="head">Parking Type :</label> <label class="col-md-8">4 Wheeler</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Floor Plan :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/3b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Specifications :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Housing Loans :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Properties Images :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Property Map :</label> <label class="col-md-8">NO</label></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal" style="background-color: #f47c3c;">Close</button></div></div></div></div>'; 
 
     //$('#modal_property').empty().append(htmlString); 
 
     }); 
 
    }, 
 
    error: function(errMsg) { 
 
     console.log(errMsg); 
 
    } 
 
    }); 
 
}

Answer 1

を使用したい私にとって、moalはこれを行うことができますどのようにshowigされていないことを意味していないあなたがmodalを追加するのを忘れそうですDOMに移動して開きます。

これを試してください：

success: function (viewresult) { 
    console.log(viewresult);  
    $.each(result, function(key, p_typevalue) { 

    htmlString+='<div id="viewproperty" class="modal fade" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">View Property Details</h4></div><div class="modal-body"><div class="row"> <label class="col-md-4" id="head">Name:</label> <label class="col-md-8">Rashmita Das</label></div><div class="row"><label class="col-md-4" id="head">Email Address:</label> <label class="col-md-8">das76rashmita.gmail.com</label></div><div class="row"><label class="col-md-4" id="head">Mobile Number:</label> <label class="col-md-8">77751068862</label></div><div class="row"><label class="col-md-4" id="head"> Property Type:</label> <label class="col-md-8">Apartment</label></div><div class="row"> <label class="col-md-4" id="head">Listed For:</label> <label class="col-md-8">SALE</label></div><div class="row"> <label class="col-md-4" id="head">Country Name:</label> <label class="col-md-8">India</label></div><div class="row"> <label class="col-md-4" id="head">State Name:</label> <label class="col-md-8">Karnataka</label></div><div class="row"> <label class="col-md-4" id="head">City Name:</label> <label class="col-md-8">Bengalore</label></div><div class="row"> <label class="col-md-4" id="head">Property Name:</label> <label class="col-md-8">3 BHK Apartment In Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line1:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line2:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Pincode:</label> <label class="col-md-8">560037</label></div><div class="row"> <label class="col-md-4" id="head">Block No:</label> <label class="col-md-8">8TH Block</label></div><div class="row"> <label class="col-md-4" id="head">House No:</label> <label class="col-md-8">10</label></div><div class="row"> <label class="col-md-4" id="head">Built Up Area:</label> <label class="col-md-8">200 sqft</label></div><div class="row"> <label class="col-md-4" id="head">No of Bedrooms:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">No of Bathrooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of Balconies/Sitouts:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of other Rooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">Monthly rent:</label> <label class="col-md-8">1000000</label></div> <div class="row"> <label class="col-md-4" id="head">Security deposit amount :</label> <label class="col-md-8">100000</label></div><div class="row"> <label class="col-md-4" id="head">Maintenance Charges:</label> <label class="col-md-8">10000</label></div><div class="row"> <label class="col-md-4" id="head">Property Ready for Possession:</label> <label class="col-md-8">02/01/2017</label></div><div class="row"> <label class="col-md-4" id="head">Construction of Your Property:</label> <label class="col-md-8">1009</label></div><div class="row"> <label class="col-md-4" id="head">Type of Ownership:</label> <label class="col-md-8">Freehold</label></div><div class="row"> <label class="col-md-4" id="head">Total Floors:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">Property Face Type:</label> <label class="col-md-8">North</label></div><div class="row"> <label class="col-md-4" id="head">Bachelor Allowed:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Non-Vegetarians Allowed:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Pets Allowed:</label> <label class="col-md-8">4</label></div><div class="row"> <label class="col-md-4" id="head">Carpet Area:</label> <label class="col-md-8">2400 sqft</label></div><div class="row"> <label class="col-md-4" id="head">Property Status:</label> <label class="col-md-8">Ready to move in</label></div><div class="row"> <label class="col-md-4" id="head">separate dining space:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Servant Accommodation:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Furnishing:</label> <label class="col-md-8">Fully Furnished </label></div><div class="row"> <label class="col-md-4" id="head">Parking Type :</label> <label class="col-md-8">4 Wheeler</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Floor Plan :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/3b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Specifications :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Housing Loans :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Properties Images :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Property Map :</label> <label class="col-md-8">NO</label></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal" style="background-color: #f47c3c;">Close</button></div></div></div></div>'; 
    $('#modal_property').empty().append(htmlString); 
    $('#viewproperty').modal(); 
    });  
} 

$('#mymodal').click(function(){ 
 
    modal=''; 
 
    modal += '<div id="viewproperty" class="modal fade" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">View Property Details</h4></div><div class="modal-body"><div class="row"> <label class="col-md-4" id="head">Name:</label> <label class="col-md-8">Rashmita Das</label></div><div class="row"><label class="col-md-4" id="head">Email Address:</label> <label class="col-md-8">das76rashmita.gmail.com</label></div><div class="row"><label class="col-md-4" id="head">Mobile Number:</label> <label class="col-md-8">77751068862</label></div><div class="row"><label class="col-md-4" id="head"> Property Type:</label> <label class="col-md-8">Apartment</label></div><div class="row"> <label class="col-md-4" id="head">Listed For:</label> <label class="col-md-8">SALE</label></div><div class="row"> <label class="col-md-4" id="head">Country Name:</label> <label class="col-md-8">India</label></div><div class="row"> <label class="col-md-4" id="head">State Name:</label> <label class="col-md-8">Karnataka</label></div><div class="row"> <label class="col-md-4" id="head">City Name:</label> <label class="col-md-8">Bengalore</label></div><div class="row"> <label class="col-md-4" id="head">Property Name:</label> <label class="col-md-8">3 BHK Apartment In Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line1:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line2:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Pincode:</label> <label class="col-md-8">560037</label></div><div class="row"> <label class="col-md-4" id="head">Block No:</label> <label class="col-md-8">8TH Block</label></div><div class="row"> <label class="col-md-4" id="head">House No:</label> <label class="col-md-8">10</label></div><div class="row"> <label class="col-md-4" id="head">Built Up Area:</label> <label class="col-md-8">200 sqft</label></div><div class="row"> <label class="col-md-4" id="head">No of Bedrooms:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">No of Bathrooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of Balconies/Sitouts:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of other Rooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">Monthly rent:</label> <label class="col-md-8">1000000</label></div> <div class="row"> <label class="col-md-4" id="head">Security deposit amount :</label> <label class="col-md-8">100000</label></div><div class="row"> <label class="col-md-4" id="head">Maintenance Charges:</label> <label class="col-md-8">10000</label></div><div class="row"> <label class="col-md-4" id="head">Property Ready for Possession:</label> <label class="col-md-8">02/01/2017</label></div><div class="row"> <label class="col-md-4" id="head">Construction of Your Property:</label> <label class="col-md-8">1009</label></div><div class="row"> <label class="col-md-4" id="head">Type of Ownership:</label> <label class="col-md-8">Freehold</label></div><div class="row"> <label class="col-md-4" id="head">Total Floors:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">Property Face Type:</label> <label class="col-md-8">North</label></div><div class="row"> <label class="col-md-4" id="head">Bachelor Allowed:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Non-Vegetarians Allowed:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Pets Allowed:</label> <label class="col-md-8">4</label></div><div class="row"> <label class="col-md-4" id="head">Carpet Area:</label> <label class="col-md-8">2400 sqft</label></div><div class="row"> <label class="col-md-4" id="head">Property Status:</label> <label class="col-md-8">Ready to move in</label></div><div class="row"> <label class="col-md-4" id="head">separate dining space:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Servant Accommodation:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Furnishing:</label> <label class="col-md-8">Fully Furnished </label></div><div class="row"> <label class="col-md-4" id="head">Parking Type :</label> <label class="col-md-8">4 Wheeler</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Floor Plan :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/3b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Specifications :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Housing Loans :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Properties Images :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Property Map :</label> <label class="col-md-8">NO</label></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal" style="background-color: #f47c3c;">Close</button></div></div></div></div>'; 
 
    $('body').append(modal); 
 
    $('#viewproperty').modal(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<button type="button" id="mymodal" class="btn btn-primary btn-lg"> 
 
    Launch demo modal 
 
</button>