Bir Bootstrap modundan veri alma

Örneğin bir Facebook oturum açma içeren bir modal pencereyi (Bootstrap kullanarak) tetikleyen bir kayıt sayfam var ve bu modemin verileri geri almasını istiyorum (hatalar veya başarılı bir şekilde belirteç/kullanıcı verileri)) ana pencereye, ilgili form alanlarını doldurabilir ve kullanıcının kayıt işlemini tamamlamasını sağlayabilirsiniz ("Şartları ve koşulları onaylıyorum" kutusunu işaretleyin).Bir Bootstrap modundan veri alma

Tümü nasıl yapılacağını biliyorum, ancak modal kapanırken verileri geri göndermeyle ilgili. Modal kapanma olayındaki moddan ana pencereye veri aktarmanın bir yolu var mı?

DÜZENLEME: flow

kaynak

2013-06-04 Davor

"Geri gönderme" ile ne demek istiyorsunuz? “Ana pencere” ndesiniz (model, içindeki sadece bir öge) Neden sayfadaki gizli girdilere veya öğelere değer, hata vb. Atamazsınız? – davidkonrad

Modal aslında, auth denetleyicimin bulunduğu farklı bir URL'yi çağırıyor. Sonuç olarak orada bir php dizim var ve bunun jQuery betiği tarafından kullanılmasını istiyorum, daha sonra ilgili değerleri sayfaya atayalım. "Geri gönderilen" ile kastettiğim şey buydu: kullanıcı, modal pencereyle bağlantı kurması dışında, ajax çağrısı gibi. – Davor

http://sptalks.wordpress.com/2013/03/12/sharepoint-modal-dialog-passing-values-back-and-forth/ gibi bir şey, ancak mümkünse Bootstrap modalıyla. – Davor

Eh: Burada ben ne başarmak istediğinizi görsel bir sunumudur. Hem ana pencereye hem de modsal içeriğe erişebilirsiniz, bu nedenle temel olarak, yalnızca kapatmadan önce kalıcı öğelerden içerik kopyalamanız gerekir. Çalışma Örneği (iki dosyalarına iki codeblocks kopyalayın):

auth.php (yok nasıl auth çalıştığını biliyorum, ama belki uzak bir giriş arayıp Sonuç elde, bir JSON-dizide saklayabilirsiniz)

<label for="modal-username">Username</label><input type="text" name="modal-username" id="modal-username"> 
<? 
$result = array(); 
$result['error']='error'; 
$result['auth']='auth'; 
$javascript_array = json_encode($result); 
?> 
<input type="hidden" id="modal-result" value='<? echo $javascript_array;?>'>

modal.html, ana pencere

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
</head> 
<body> 

<!-- button to trigger modal --> 
<a href="auth.php" data-target="#myModal" data-toggle="modal">remote modal</a> 

<!-- hidden fields to store modal result in --> 
<input type="hidden" id="main-username"> 
<input type="hidden" id="main-result"> 

<!-- modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal test</h3> 
    </div> 
    <div class="modal-body"> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
    <button class="btn btn-primary" onclick="login();">Login</button> 
    </div> 
</div> 

<script type="text/javascript"> 
//called when user clicks login 
function login() { 
    $("#main-username").val($("#modal-username").val()); 
    $("#main-result").val($("#modal-result").val()); 
    $("#myModal").modal("hide"); 
} 

//called when the modal is closed, logs values grabbed from the modal in login() 
$('#myModal').on('hidden', function() { 
    console.log('username : '+$("#main-username").val()); 
    console.log('result : '+$("#main-result").val()); 
}) 
</script> 

</body> 
</html>

kaynak

2013-06-04 12:17:19 davidkonrad

Böyle ayrıntılı bir cevap yazmak için zaman ayırdığınız için çok teşekkürler! Çok yardımcı oldu. – Davor

Teşekkürler, çok yardımcı oldu! – Willz

artık hiç gösterilmiyor, class = "display: none" ile değiştirilmemiş gizle class ile çalışmıyor; – Sergey

Bootstrap bunu başarmak için taşıma aşağıdaki dahili olay sağlamaktadır:

show.bs.modal - Modal
shown.bs.modal gösterildiği üzere olan oluşur - kalıcı tam CSS (geçişleri tamamladıktan sonra)
hide.bs gösterilmiştir oluşur (CSS geçişleri tamamladıktan sonra) kalıcı tamamen gizli olduğunda davanız saklambaç kullanabilirsiniz için

oluşuyor - .modal - modal
hidden.bs.modal gizlenmesine üzereyken gerçekleşir. değerlerini almak için bs.modal olayı Düğmeden sonra modal nitelikler tıklanır ve modal gizlenmeden önce. Bu şekilde davidkonrad tarafından verilen örnek, ara gizli özniteliklere duyulan ihtiyacı ortadan kaldıran tek bir işlevle elde edilebilir.

$('#myModal').on('hide.bs.modal', function() {  
    console.log('username : '+$("#modal-username").val());  
    console.log('result : '+$("#modal-result").val());  
})

kaynak

2016-06-26 09:05:53 Srini

Bir Bootstrap modundan veri alma

cevap

İlgili konular