पेज लोड पर बूटस्ट्रैप मोडल लॉन्च करें

Question

मैं जावास्क्रिप्ट बिल्कुल नहीं जानता। बूटस्ट्रैप प्रलेखन कहता है

जावास्क्रिप्ट के माध्यम से मॉडल को कॉल करें: $ ('# myModal')। मोडल (विकल्प)

पेज लोड पर मुझे इस बारे में कोई सुराग नहीं है। बूटस्ट्रैप पेज पर आपूर्ति किए गए कोड का उपयोग करके मैं एक तत्व क्लिक पर मोडल को सफलतापूर्वक कॉल कर सकता हूं, लेकिन मैं चाहता हूं कि यह तुरंत पृष्ठ लोड पर लोड हो।

Comments

पेज लोड होने के बाद जावास्क्रिप्ट रन फंक्शन

— rlemon

इस सवाल का कई बार जवाब दिया गया है। कृपया खोज फ़ंक्शन "पेज लोड पर जावास्क्रिप्ट चलाएँ" का उपयोग करें।

— रिलेमोन

@rlemon - जरूरी नहीं; सवाल बूटस्ट्रैप मोडल के बारे में कड़ाई से था और सामान्य रूप से पृष्ठ लोड पर कार्य नहीं कर रहा था। बूटस्ट्रैप मोडल को सीएसएस कक्षाओं के माध्यम से भी हेरफेर किया जा सकता है, उत्तर में से एक देखें।

— मिरो

यह help.simpler: w3schools.com/jsref/… onload घटना के साथ

— user2290820

Answer 1

बस उस मोडल को लपेटें जिसे आप loadअपने दस्तावेज़ के मुख्य भाग पर एक jQuery इवेंट के अंदर पेज लोड पर कॉल करना चाहते हैं और इसे पॉपअप करना चाहिए, जैसे:

जे एस

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>

एचटीएमएल

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

आप अभी भी अपने पृष्ठ के भीतर मोडल को कॉल कर सकते हैं जैसे कि इसे एक लिंक के साथ कॉल करके:

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

Comments

यह उत्तर सही है। एक बात का ध्यान रखें कि यह दस्तावेज़ तैयार घटना पर बिल्कुल भी काम नहीं करेगा $(document).ready( ... :। यह केवल विंडो लोड ईवेंट पर काम करेगा $(window).load( ... :।

— racl101

एक और महत्वपूर्ण नोट: बहुत से लोग अपने जावास्क्रिप्ट को शरीर के अंत में पोस्ट करते हैं। किस मामले में, शामिल होने के बाद, ऑनलोड फ़ंक्शन को अंत में शामिल किया जाना चाहिए।

— एडम जोसेफ लूज

@ racl101 यह मेरे लिए विपरीत है (आपकी पोस्ट को 2 साल हो गए हैं, इसलिए चीजें बदल सकती हैं)। यह तभी काम करता है $(document).ready( ...जब मैं इस स्क्रिप्ट को अपने मॉडल के लिए MVC PartialView में संग्रहीत करता हूं जो कि गतिशील रूप से तब जोड़ा जाता है जब कोई उपयोगकर्ता किसी चीज़ पर क्लिक करता है, इसलिए शायद इसीलिए। विडंबना यह है कि क्या नहीं करने की आपकी चेतावनी ने मुझे यह पता लगाने की अनुमति दी कि यह मेरे लिए कैसे काम करेगा। तो धन्यवाद? :)

— माइकिटिवे

छिपाना मेरे लिए काम नहीं किया (वर्ग के रूप में), क्योंकि बूटस्ट्रैप ने इसे खत्म कर दिया और इसलिए कुछ भी नहीं दिखा। यह भयानक लग रहा था (एक मोडल की तरह नहीं) और जब आपने बटन दबाया तो यह भी बंद नहीं हुआ। जावास्क्रिप्ट भाग ने काम किया, लेकिन मैं उस मॉडल के HTML भाग का उपयोग करने का सुझाव दूंगा जिसका उपयोग GAURAV MAHALE ने अपने उत्तर में किया था, लेकिन अपने मॉडल की कक्षा में 'शो' शब्द को हटाने के लिए ध्यान दें।

— मालाची

बस पहले jQuery लाइब्रेरी को शामिल करें!

— ४५

Answer 2

आपको javascriptमोडल दिखाने की आवश्यकता नहीं है

सबसे सरल तरीका "द्वारा" छिपाएं ""

class="modal fade hide"

इसलिए

class="modal fade in"

और आपको onclick = "$('.modal').hide()"बटन क्लोज़ पर जोड़ना होगा ;

PS: मुझे लगता है कि jQuery स्क्रिप्ट जोड़ने का सबसे अच्छा तरीका है:

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

Comments

मैंने इस विधि की कोशिश की है, लेकिन दो मुद्दे प्राप्त करें। 1) मोडल बंद नहीं होगा। 2) मोडल बैकग्राउंड गायब हो गया है। कोई विचार?

— निक ग्रीन

ऊपर jquery समाधान अच्छी तरह से काम करता है। कोड की एक लाइन ट्रिक करती है। @ नाइकग्रीन इसे आज़माइए: क्लास = "मोडल फेड"। 'छिपाएँ' और 'में' निकालें। यह मेरे मामले में काम करता है, लेकिन यह अभी तक जीवित नहीं है, अन्यथा मैं लिंक पोस्ट करता।

— रैंडी ग्रीनकोर्न

Answer 3

बस निम्नलिखित जोड़ें-

class="modal show"

कार्य उदाहरण-

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal show" 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>

Comments

यह समाधान काम नहीं कर रहा है: संवाद स्थायी रूप से पृष्ठ के शीर्ष पर अटका हुआ है। इसके अलावा, यदि आप "मोडल" के साथ "फीका" वर्ग का उपयोग करते हैं, तो संवाद बिल्कुल दिखाई नहीं देगा।

— बोरिस बुर्कोव

यह इस बात पर निर्भर करता है कि मॉडल को किस परिदृश्य में प्रदर्शित करने की आवश्यकता है, मेरे मामले में मैं चाहता हूं कि मॉडल स्थायी रूप से अटक जाए।

— को प्रोग्रामिंग के प्रोफेसर

साथ ही बॉब की समस्या का सामना किया

अगर उनके पास कुछ भी नहीं होगा तो पास बटन क्यों हैं? क्या इसे काम करने का कोई तरीका है?

— एलेन मैकास्ले

@ पोर्टिस, इसे मोडल क्लोज़ बटन में जोड़ें:onclick = "$('.modal').removeClass('show').addClass('fade');"

— सॉ-मोन और नेटली

Answer 4

आप इस रन करने योग्य कोड को आजमा सकते हैं-

$(window).load(function()
{
    $('#myModal').modal('show');
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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>

अधिक यहाँ पाया जा सकता है ।

सोचो यू तुम्हारा पूरा जवाब है।

Comments

सिर के लिए आवश्यक लिंक प्रकाशित करने के लिए धन्यवाद :)

— DanielaB67

मेरे लिए, यह कोड एकमात्र ऐसा था जो खूबसूरती से चलता था। धन्यवाद।

— सेमरकेट

Answer 5

आंद्रे की इलिच क्या कहती है, इस बारे में कि आपको jquery में js स्क्रिप्ट को लाइन के बाद जोड़ना है:

<script src="content/bootstrapJS/jquery-2.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
     $(window).load(function(){
         $('#myModal').modal('show');
      });
</script>

मेरे मामले में यह समस्या थी आशा है कि यह मदद करता है

Answer 6

मेरे मामले में मॉडल को दिखाने के लिए jQuery को जोड़ने से काम नहीं चला:

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

जो लग रहा था क्योंकि मोडल में aria-hidden = "true" विशेषता थी:

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

उस विशेषता को हटाने के साथ ही ऊपर jQuery की आवश्यकता थी:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

ध्यान दें कि मैं से मोडल वर्गों को बदलने की कोशिश की modal fadeकरने के लिए modal fade in, और कहा कि काम नहीं किया। इसके अलावा, मोडल modal fadeको modal showबंद करने में सक्षम होने से कक्षाओं को बदलना ।

Answer 7

एक समाधान [बिना जावास्क्रिप्ट आरंभीकरण!]

मैं जावास्क्रिप्ट के साथ अपने मॉडल को शुरू किए बिना एक उदाहरण नहीं पा सकता हूं $('#myModal').modal('show'), इसलिए पृष्ठ लोड पर जावास्क्रिप्ट देरी के बिना आप इसे कैसे लागू कर सकते हैं, इस पर एक सुझाव प्रस्तुत करता है ।

1. अपने मोडल कंटेनर डिव को क्लास और स्टाइल के साथ संपादित करें:

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

2. अपने शरीर को कक्षा और शैली के साथ संपादित करें:

   <body class="modal-open" style="padding-right:17px;">

3. मोडल-बैकड्रॉप डिव जोड़ें

   <div class="modal-backdrop in"></div>

4. स्क्रिप्ट जोड़ें

   $(document).ready(function() {
       $('body').css('padding-right', '0px');
       $('body').removeClass('modal-open');
       $('.modal-backdrop').remove();
   
       $('#MyModal').modal('show'); });

   क्या होगा कि आपके मोडल के लिए html बिना किसी जावास्क्रिप्ट के पेज लोड पर लोड हो जाएगा, (कोई देरी नहीं)। इस बिंदु पर आप मोडल को बंद नहीं कर सकते हैं, यही कारण है कि हमारे पास डॉक्यूमेंट पहले से ही है, जब सब कुछ लोड होने पर मॉडल को ठीक से लोड करने के लिए। हम वास्तव में कस्टम कोड को हटा देंगे और फिर मोडल (फिर से) को .modal ('शो') के साथ आरंभ करेंगे।

Comments

अच्छा सुझाव। धन्यवाद!

— राफाशीष

Answer 8

आप केवल डेटा विशेषताओं के माध्यम से किसी भी जावास्क्रिप्ट को लिखने के बिना मॉडल को सक्रिय कर सकते हैं।

विकल्प "शो" सच को दिखाता है जब इनिशियलाइज़ किया जाता है:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

Answer 9

जैसे दूसरों ने उल्लेख किया है, प्रदर्शन के साथ अपना मोडल बनाएं: ब्लॉक करें

<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...

अपने पृष्ठ पर कहीं भी पृष्ठभूमि रखें, यह पृष्ठ के निचले भाग में होने की आवश्यकता नहीं है

<div class="modal-backdrop fade show"></div> 

फिर, फिर से संवाद को बंद करने में सक्षम होने के लिए, इसे जोड़ें

<script>
    $("button[data-dismiss=modal]").click(function () {
        $(".modal.in").removeClass("in").addClass("fade").hide();
        $(".modal-backdrop").remove();
    });
</script>

उम्मीद है की यह मदद करेगा

Answer 10

बूटस्ट्रैप 3 और jQuery के साथ परीक्षण किया गया (2.2 और 2.3)

$(window).on('load',function(){
  $('#myModal').modal('show');
});



<!-- 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"><i class="fa fa-exclamation-circle"></i>&nbsp; //Your modal Title</h4>
        </div>
        <div class="modal-body">
          //Your modal Content
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>

    </div>
</div>

https://jsfiddle.net/d7utnsbm/

Comments

@EduardoCuomo हाँ, यह काम करता है jsfiddle.net/bsmpLvz6 यह उदाहरण बूटस्ट्रैप 3.3 और jQuery 2.2 का उपयोग करके बनाया गया था

— फेलिप लीमा

Answer 11

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

आप इसे जावास्क्रिप्ट के बिना भी शुरू में दिखा सकते हैं। बस वर्ग "छिपाने" को हटा दें।

class="Modal"

Answer 12

जावास्क्रिप्ट के बिना , लेकिन साथ उपयोगकर्ता2545728 और रीफ्ट उत्तर के अलावाmodal-backdrop in

3 चीजें जोड़ने के लिए

1. modal-backdrop in.modal वर्ग से पहले कक्षाओं के साथ एक div
2. style="display:block;" .मॉडल वर्ग के लिए
3. fade in साथ में ।मॉडल वर्ग के साथ

उदाहरण

<div class="modal-backdrop in"></div>

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="channelModal">Welcome!</h4>

            </div>

            <div class="modal-body" style="height:350px;">

                How did you find us?

            </div>

        </div>

    </div>

</div>

Answer 13

अद्यतन 2020 - बूटस्ट्रैप 4

मोडल मार्कअप बूटस्ट्रैप 4 के लिए थोड़ा बदल गया है। यहां बताया गया है कि आप पेज लोड पर मोडल कैसे खोल सकते हैं, और वैकल्पिक रूप से मोडल का प्रदर्शन ...

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds

    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

कोडवर्ड पर डेमो

Comments

वैकल्पिक रूप से, आप "डेटा-शो" विशेषता का उपयोग कर सकते हैं: getbootstrap.com/docs/4.5/compenders/modal/#via-data-attributes

— माइक

Answer 14

बूटस्ट्रैप 3 में आपको बस js के माध्यम से मोडल को इनिशियलाइज़ करना होगा और यदि पेज लोड होने की स्थिति में मोडल मार्कअप पृष्ठ में है तो मोडल दिखाई देगा।

यदि आप इसे रोकना चाहते हैं, तो उस विकल्प का उपयोग करें show: falseजहां आप मोडल को इनिशियलाइज़ करते हैं। कुछ इस तरह: $('.modal').modal({ show: false })

Answer 15

आप jquery.jsतेज़ पृष्ठ लोड के लिए स्थगित रखना चाह सकते हैं । हालांकि, अगर jquery.jsटाल दिया जाए तो $(window).loadकाम नहीं हो सकता। तब आप कोशिश कर सकते हैं

setTimeout(function(){$('#myModal').modal('show');},3000);

पृष्ठ के पूरी तरह लोड होने के बाद यह आपके मोडल को पॉपअप कर देगा (इसमें jquery भी शामिल है)

Comments

DOM के तैयार होने के लिए एक समय सीमा निर्धारित करना सबसे खराब अभ्यास है .. यदि उपयोगकर्ता के पास धीमा कनेक्शन है तो क्या होगा? यह 10 सेकंड ले सकता है .. तो कभी भी ऐसा न करें

— डचकेव जुएल

Answer 16

बूटस्ट्रैप को ओवरराइड होने और इट्स फ़ंक्शनलिटी खोने से बचने के लिए, बस एक नियमित लॉन्च बटन बनाएं, इसे एक Id प्रदान करें, और jquery का उपयोग करके इसे 'क्लिक करें', जैसे: लॉन्च बटन:

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
  See what´s new!
</button>

JQuery ट्रिगर:

$(document).ready(function () {
  $('#btnAnouncement').click();
)}

आशा करता हूँ की ये काम करेगा। चीयर्स!

Answer 17

सरल उदाहरण बूटस्ट्रैप मोडल का लोडर स्पिनर बनाएं

<!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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
  $('#myModal').modal('show'); 
  setTimeout(function(){
  $('#myModal').modal('hide'); 
  }, 5000);
   });
  </script>
  <style>
.loader {
  border: 13px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.modal-dialog{
width: 150px;
    margin: 10% auto;
}
.modal-content{
background-color: transparent; 
   border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}
</style>
</head>
<body>

<div class="container">

  <!-- Modal -->
  <div class="modal fade" data-backdrop="static" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-body">
         <div class="loader"></div>
        </div>

      </div>

    </div>
  </div>

</div>

</body>
</html>