jQuery का उपयोग कर बूटस्ट्रैप मोडल विंडो कैसे खोलें?

Question

मैं ट्विटर बूटस्ट्रैप मोडल विंडो कार्यक्षमता का उपयोग कर रहा हूं। जब कोई मेरे फॉर्म पर सबमिट करता है, तो मैं फॉर्म में "सबमिट बटन" पर क्लिक करके मोडल विंडो दिखाना चाहता हूं।

<form id="myform" class="form-wizard"> 
    <h2 class="form-wizard-heading">BootStap Wizzard Form</h2> 
    <input type="text" value=""/> 
    <input type="submit"/> 
</form> 

<!-- 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 header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

jQuery:

$('#myModal').modal('toggle'); 
$('#myModal').modal('show'); 
$('#myModal').modal('hide'); 

आप यहाँ अधिक देख सकते हैं: Bootstrap modal component

विशेष रूप

methods section

$('#myform').on('submit', function(ev) { 
    $('#my-modal').modal({ 
     show: 'false' 
    }); 


    var data = $(this).serializeObject(); 
    json_data = JSON.stringify(data); 
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data); 

    ev.preventDefault(); 
}); 

Answer 1

बूटस्ट्रैप कुछ कार्यों कि क्रियार्थ द्योतक पर मैन्युअल रूप से कहा जा सकता है है ।

$('#my-modal').modal({ 
    show: 'false' 
}); 

लिए:

$('#myModal').modal('show'); 

आप अपनी खुद की एक कस्टम पॉपअप बनाने के लिए देख रहे हैं, यहाँ एक और समुदाय के सदस्य से सुझाया गया वीडियो है

तो तुम को बदलने की जरूरत होगी:

https://www.youtube.com/watch?v=zK4nXa84Km4

Answer 2

इसके अलावा आप के माध्यम से उपयोग कर सकते हैं डेटा विशेषता

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> 

इस विशेष मामले में आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है।

आप यहाँ और अधिक देख सकते हैं: http://getbootstrap.com/2.3.2/javascript.html#modals

Answer 3

अक्सर, जब $('#myModal').modal('show'); काम नहीं करता है, यह शामिल होने jQuery द्वारा दो बार कारण हो सकती है। JQuery 2 बार सहित मॉडलों को काम नहीं करता है।

इसे फिर से काम करने के लिए लिंक में से एक को हटा दें।

इसके अलावा, कुछ प्लग-इन त्रुटियों भी, इस मामले में जोड़ने

jQuery.noConflict(); 
$('#myModal').modal('show'); 

Answer 4

बस मोडल विधि कॉल jQuery चयनकर्ता का उपयोग (किसी भी पैरामीटर प्रदान करने के बिना) होता है।

$('#modal').modal(); 

Answer 5

आप लिंक के onclick समारोह का उपयोग करते हैं jQuery द्वारा एक मॉडल कॉल करने के लिए, "href" नल नहीं हो सकता:

यहाँ उदाहरण है।

उदाहरण के लिए:

... ... 
<a href="" onclick="openModal()">Open a Modal by jQuery</a> 
... ... 
... ... 
<script type="text/javascript"> 

function openModal(){ 

    $('#myModal').modal(); 
}  
</script> 

मॉडल नहीं दिखा सकते हैं। सही कोड है:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a> 

Answer 6

पूर्ण समाधान चेक आउट यहाँ:

1- सबसे पहले बूटस्ट्रैप:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

परिणाम प्राप्त करने के लिए आवश्यक क्रम में पुस्तकालयों डाल करने के लिए सुनिश्चित करें। min.css 2- jquery.min.js 3- bootstrap.min.js

(दूसरे शब्दों में jquery.min.js पहले कॉल होना चाहिए bootstrap.min.js)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Answer 7

मैं कई तरीके है जिसके विफल रही कोशिश की, लेकिन नीचे एक आकर्षण की तरह मेरे लिए काम किया:

$('#myModal').appendTo("body").modal('show'); 

Answer 8

यहाँ कैसे जैसे ही दस्तावेज है के रूप में बूटस्ट्रैप चेतावनी लोड करने के लिए है तैयार। यह सिर्फ

$(document).ready(function(){ 
    $("#myModal").modal(); 
}); 

जोड़ने मैं W3Schools पर एक demo बनाया बहुत आसान है।

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2> 
 
    <!-- Trigger the modal with a button --> 
 

 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    $("#myModal").modal(); 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

Answer 9

<form id="myform" class="form-wizard"> 
    <h2 class="form-wizard-heading">BootStap Wizzard Form</h2> 
    <input type="text" value=""/> 
    <input type="submit" id="submitButton"/> 
</form> 

<!-- 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 header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

आप इस नीचे दिए गए कोड के साथ मॉडल लॉन्च कर सकते हैं।

$(document).ready(function(){ 
    $("#submitButton").click(function(){ 
     $("#myModal").modal(); 
    }); 
}); 

Answer 10

$("#myModal").modal("toggle") 

खोलने या आईडी myModal साथ मोडल बंद करने के लिए प्रयास करें।

यदि उपरोक्त काम नहीं कर रहा है तो इसका मतलब है कि bootstrap.js को किसी अन्य जेएस फ़ाइल द्वारा ओवरराइड किया गया है। यहां एक समाधान है

1: - bootstrap.js को नीचे ले जाएं ताकि यह अन्य जेएस फ़ाइलों को ओवरराइड कर सके।

2: - सुनिश्चित करें कि आदेश की तरह

नीचे

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Other js files --> 
<script src="plugins/jQuery/bootstrap.min.js"></script>