2017-01-10 24 views
5

मुझे बूटस्ट्रैप में बंद मोडल के साथ कोई समस्या है। जब मैं डेटा के साथ एक मोडल विंडो खोलता हूं (ट्रिगर बटन के आधार पर मोडल सामग्री को बदलना)। इस में http://getbootstrap.com/javascript/#modalsबूटस्ट्रैप मोडल बंद बटन

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> 
...more buttons... 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="exampleModalLabel">New message</h4> 
     </div> 
     <div class="modal-body"> 
     <form> 
      <div class="form-group"> 
      <label for="recipient-name" class="control-label">Recipient:</label> 
      <input type="text" class="form-control" id="recipient-name"> 
      </div> 
      <div class="form-group"> 
      <label for="message-text" class="control-label">Message:</label> 
      <textarea class="form-control" id="message-text"></textarea> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" id="btnclose" data-dismiss="modal">Close</button> 
     <button type="button" id="btnsend" class="btn btn-primary">Send message</button> 
     </div> 
    </div> 
    </div> 
</div> 

यह ठीक है उदाहरण है लेकिन अगर मैं मॉडल और अन्य बटन, में खुला बंद कंसोल में भेजें बटन प्रिंट पर क्लिक पहले मोडल और इस मॉडल के प्राप्तकर्ता मूल्य लॉग ऑन करें। लेकिन मुझे केवल अंतिम प्राप्तकर्ता मूल्य मुद्रित करने की आवश्यकता है। मुझे समझ में नहीं आता कि पिछले मोडल बंद होने की घटनाओं को ढेर क्यों करें। यह मेरा jQuery कोड, दोनों बटन के लिए है:

$('#exampleModal').on('show.bs.modal', function (event) { 

    var button = $(event.relatedTarget) // Button that triggered the modal 
    var recipient = button.data('whatever') // Extract info from data-* attributes 
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 
    var modal = $(this) 
    modal.find('.modal-title').text('New message to ' + recipient) 
    modal.find('.modal-body input').val(recipient) 

    $("#btnsend").one("click", function(){ 
     console.log('Pinchado') 
     console.log(recipient) 
    }) 

    $("#btnclose").one("click", function(){ 
     console.log('Cerrando...') 
    }) 

    $('#exampleModal').on('hidden.bs.modal', function (e) { 
     console.log('Cerrada'); 
    }) 

    }) 

धन्यवाद आपको बहुत बहुत और मुझे आशा है कि किसी को भी मेरी मदद कर सकते हैं। https://jsfiddle.net/DTcHh/28480/

+0

मेरे लिए केवल पिछले मोडल प्राप्तकर्ता प्रिंट करता है। – Troyer

उत्तर

4

यह पुराना तरीका है या आप पारंपरिक तरीके से कह सकते हैं कि आप यह कर रहे हैं। फिर भी इसका जवाब है। बस छुपाएं और शो इवेंट बाइड के बाहर इवेंट्स पर क्लिक करें।

$('#exampleModal').on('show.bs.modal', function(event) { 
 

 
    var button = $(event.relatedTarget) // Button that triggered the modal 
 
    var recipient = button.data('whatever') // Extract info from data-* attributes 
 
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 
 
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 
 
    var modal = $(this) 
 
    modal.find('.modal-title').text('New message to ' + recipient) 
 
    modal.find('.modal-body input').val(recipient) 
 

 
    
 

 
}) 
 
    
 
$("#btnsend").on("click", function() { 
 
    console.log('Pinchado') 
 
    console.log(recipient) 
 
    }) 
 

 
    $("#btnclose").on("click", function() { 
 
    console.log('Cerrando...') 
 
    }) 
 

 
    $('#exampleModal').on('hidden.bs.modal', function(e) { 
 
    console.log('Cerrada'); 
 
    })
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 

 

 

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> 
 
...more buttons... 
 

 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="exampleModalLabel">New message</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Recipient:</label> 
 
      <input type="text" class="form-control" id="recipient-name"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Message:</label> 
 
      <textarea class="form-control" id="message-text"></textarea> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" id="btnclose" data-dismiss="modal">Close</button> 
 
     <button type="button" id="btnsend" class="btn btn-primary">Send message</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

नीचे दिए गए कर के आधुनिक तरीका है। गतिशील रूप से मोडल बनाने के तरीके के बारे में अधिक जानकारी के लिए आप this link देख सकते हैं।

function open_modal(name) { 
 

 
    var message = $('#frm_1'); 
 
    BootstrapDialog.show({ 
 
    title: 'New message to ' + name, 
 
    message: $('#frm_1'), 
 
    onshown : function() { 
 
     $('#recipient-name').val(name); 
 
    }, 
 
    onhide : function(dialog) { 
 
     $('#hidden-div').append(message); 
 
    }, 
 
    buttons: [{ 
 
     label: 'Close', 
 
     action: function(dialog) { 
 
     dialog.close(); 
 
     } 
 
    }, { 
 
     label: 'Send message', 
 
     cssClass: 'btn btn-primary', 
 
     action: function(dialog) { 
 
     // Do whatever send message does, here 
 
     } 
 
    }] 
 
    }); 
 

 

 

 
}
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 
<button type="button" class="btn btn-primary" onclick="open_modal('@mdo')">Open modal for @mdo</button> 
 
<button type="button" class="btn btn-primary" onclick="open_modal('@fat')">Open modal for @fat</button> 
 
<button type="button" class="btn btn-primary" onclick="open_modal('@getbootstrap')">Open modal for @getbootstrap</button> 
 

 

 

 
<div id="hidden-div" style="display : none"> 
 

 
    <form id="frm_1"> 
 
    <div class="form-group"> 
 
     <label for="recipient-name" class="control-label">Recipient:</label> 
 
     <input type="text" class="form-control" id="recipient-name"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="message-text" class="control-label">Message:</label> 
 
     <textarea class="form-control" id="message-text"></textarea> 
 
    </div> 
 
    </form> 
 

 

 
</div>

+0

कमाल का जवाब ... धन्यवाद! –

0

आप अपनी प्रतिक्रिया के लिए बहुत बहुत धन्यवाद। अब काम करो। पहले उदाहरण में, एक त्रुटि है। इसे वर्र्स ग्लोबल बनाने के लिए var को हटाएं। अच्छी तरह से काम है के साथ।

$('#exampleModal').on('show.bs.modal', function(event) { 

      button = $(event.relatedTarget) // Button that triggered the modal 
      recipient = button.data('whatever') // Extract info from data-* attributes 
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 
      var modal = $(this) 
      modal.find('.modal-title').text('New message to ' + recipient) 
      modal.find('.modal-body input').val(recipient) 
    }) 
1

बूटस्ट्रैप 3.3.7 मेरे लिए इस काम में:

$('#myModal').trigger('click.dismiss.bs.modal')

संबंधित मुद्दे