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

Question

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

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard 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:

$('#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();
});

Comments

आपके पास अपने शो विकल्प में एक टाइपो है। यह एक बूलियन लेता है, इसलिए 'झूठ' - $ ('# मेरा-मोडल') के आसपास उद्धरण न दें। मॉडल ({शो: गलत});

— डैरेन पार्कर

Answer 1

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

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

आप यहां अधिक देख सकते हैं: बूटस्ट्रैप मोडल घटक

विशेष रूप से विधियों अनुभाग ।

इसलिए आपको बदलने की आवश्यकता होगी:

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

सेवा:

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

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

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

Comments

मुझे यकीन नहीं है कि यह मेरे मामले में काम क्यों नहीं करता है। मेरे पेज में एक ही डेमो कोड है, और मैंने ऊपर दिए गए सबमिट बटन को कोड कर दिया है। हालाँकि, जब मैं सबमिट पर क्लिक करता हूं, तो मोडल विंडो तेजी से चमकती है और चली जाती है। पेज को वापस करने के लिए मुझे ब्राउज़र 'बैक' बटन पर क्लिक करना होगा।

— 2:22 बजे क्रिस 22

मुझे अपनी टिप्पणी के लिए यहाँ awser मिला । साइट पृष्ठों पर bootrap.js के लिए डुप्लिकेट लिंक।

— क्रिस 22

अनकैप्ड टाइपर: $ (...)। मोडल एक फंक्शन नहीं है, यह शायद मैं हूं लेकिन कोई भी विचार क्यों मुझे यह त्रुटि मिलती है? (मेरे पास jQuery है)

— व्लादिमीर verleg

मुझे अपनी समस्या का पता चला, मैंने एक अजाक्स कॉल को एक फ़ाइल चुड़ैल में शामिल कर लिया जिसमें जेकरी शामिल थी। अगर jQuery को 2 बार शामिल किया जाता है तो यह काम नहीं करता है!

— व्लादिमीर

मैंने कोशिश की .modal('show')लेकिन गूगल क्रोम ब्राउज़र में काम नहीं कर रहा है

— दुर्गा

Answer 2

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

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

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

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

Comments

स्पष्ट करने के लिए: "जावास्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है" का अर्थ है "जावास्क्रिप्ट लिखने की आवश्यकता नहीं है", जावास्क्रिप्ट अभी भी उपयोग किया जा रहा है। मैंने उत्तर को संपादित करने की कोशिश की लेकिन यह अस्वीकार हो गया क्योंकि यह "अधिक सटीक" नहीं था। यदि आप जावास्क्रिप्ट अक्षम के साथ ऊपर कोड की कोशिश करते हैं, तो यह काम नहीं करेगा। इसका मतलब है कि आप मेरे लिए जावास्क्रिप्ट का उपयोग करें।

— npretto

Answer 3

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

इसे फिर से काम करने के लिए किसी एक लिंक को निकालें।

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

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

Comments

इसके साथ डेटाटेबल्स को पहले से पैक किया गया jQuery संस्करण मेरे लिए इसका कारण था

— वेस्ली स्मिथ

आपका बहुत बहुत धन्यवाद। मुझे एक ही समस्या है: मोडल एक फ़ंक्शन नहीं है। लेकिन jQuery.noConflict () को जोड़ने के बाद यह काम करता है।

— जॉब करने वाले ने

यह ध्यान दिया जाना चाहिए कि इस वर्कअराउंड का उपयोग केवल तभी किया जाना चाहिए यदि आप मूल कारण को हल नहीं कर सकते हैं (अर्थात केवल एक बार jQuery शामिल करें)। यदि कुछ थर्ड पार्टी प्लगइन इसमें शामिल है, तो या तो गैर-शामिल संस्करण की तलाश करें या किसी एक को बनाने के लिए तीसरे पक्ष से संपर्क करें।

— rybo111

Answer 4

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

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

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

Comments

मैं अपने मोडल के लिए अधिक पैरामीटर कैसे पास कर सकता हूं? उदाहरण के लिए, एक विशिष्ट (गतिशील) आईडी?

— पाथरोस

आप अपनी आईडी को गतिशील कैसे बनाते हैं? क्या आप इसे आईडी द्वारा बनाते हैं? यदि हाँ, तो आप वर्तमान वस्तु का चयन करने के लिए $ (इस) कार्यक्षमता का उपयोग कर सकते हैं और उसके लिए पैरामीटर पास कर सकते हैं।

— ब्रून

Answer 5

यदि आप 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

दस्तावेज़ तैयार होते ही बूटस्ट्रैप अलर्ट लोड करने का तरीका यहां दिया गया है। इसे जोड़ना बहुत आसान है

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

मैंने W3Schools पर एक डेमो बनाया ।

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

पूरा समाधान यहां देखें:

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

परिणाम प्राप्त करने के लिए आवश्यक क्रम में पुस्तकालयों को रखना सुनिश्चित करें:

1- सबसे पहले bootstrap.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 8

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

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

Comments

वही! यह एकमात्र समाधान है जो मेरे लिए भी काम करता है।

— पेंग

क्या आप वाकई यह नहीं चाहते हैं .appendTo("modal-body")?

— जेम्स ए मोहलर

@novembersky, आपको कोड को या तो ईवेंट पर क्लिक करने की आवश्यकता है या जब पेज लोड कर रहा है jquery: (डॉक्यूमेंट)। डेड (फ़ंक्शन () {$ ("# myModal")। modal ();});

— अभिजीत कुमार

Answer 9

फ़ंक्शन को कॉल करते समय $ साइन के बजाय jQuery का उपयोग करने का प्रयास करें , यह मेरे मामले में काम करता है जैसा कि आप नीचे देख सकते हैं।

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

jQuery.noConflict (); क्योंकि जब jQuery ('# myModal'); मोडल ('शो'); काम नहीं करता है, यह दो बार jQuery को शामिल करने के कारण होता है। 2 बार jQuery को शामिल करने से मोडल काम नहीं करता है। और यह उस मामले में समस्या को हल करेगा, जैसा कि मेरे मामले में यह दोहरा रहा है।

आगे आप इस लिंक पर जा सकते हैं

JQuery के माध्यम से कॉल करके बूटस्ट्रैप मॉडल विंडो नहीं दिखा रहा है

Answer 10

प्रयत्न

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

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

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

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

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

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

Answer 11

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard 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 12

इसे इस्तेमाल करे

myModal1 मोडल की आईडी है

$('#myModal1').modal({ show: true });

Answer 13

<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>

Comments

ऐसे प्रश्नों का उत्तर देते समय जिनके पास पहले से उत्तर हैं, कृपया मौजूदा उत्तरों पर विस्तार करने का प्रयास करें। यह भी आम तौर पर एक अच्छा विचार है कि आपके कोड में सवाल का जवाब देने की व्याख्या शामिल है।

— क्रिस कैमारेटा

Answer 14

बूटस्ट्रैप 4.3 - यहाँ अधिक

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

<!-- Initialize Bootstrap 4 -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<!-- MODAL -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    
      <div class="modal-body">
        Hello world   
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>