পৃষ্ঠা লোডে বুটস্ট্র্যাপ মডেল চালু করুন

Question

আমি জাভাস্ক্রিপ্ট মোটেও জানি না। বুটস্ট্র্যাপ ডকুমেন্টেশন বলে

জাভাস্ক্রিপ্টের মাধ্যমে মডেলকে কল করুন: $ ('# মাইমোডাল') mod মডেল (বিকল্পগুলি)

কোনও পৃষ্ঠা লোডে কীভাবে এটি কল করা যায় তা সম্পর্কে আমার কোনও ধারণা নেই। বুটস্ট্র্যাপ পৃষ্ঠায় সরবরাহকৃত কোডটি ব্যবহার করে আমি কোনও মৌলিক ক্লিকে সফলভাবে মডেলকে কল করতে পারি, তবে আমি চাইছি এটি একটি পৃষ্ঠা লোডের সাথে সাথেই লোড হয়ে যায়।

Comments

পৃষ্ঠা লোডের পরে জাভাস্ক্রিপ্ট রান

— ফাংশনটির

এই প্রশ্নের উত্তর বহুবার দেওয়া হয়েছে। দয়া করে অনুসন্ধান পৃষ্ঠাটি "পৃষ্ঠা লোডে জাভাস্ক্রিপ্ট চালান" ব্যবহার করুন।

— rlemon

@ রলেমন - অগত্যা নয়; প্রশ্নটি ছিল বুটস্ট্র্যাপ মডেল সম্পর্কে এবং সাধারণভাবে পৃষ্ঠা লোডের উপর ফাংশনগুলি পরিচালনা করে না about বুটস্ট্র্যাপ মডেলটি সিএসএস ক্লাসের মাধ্যমেও ম্যানিপুলেটেড করা যেতে পারে, এর একটি উত্তর দেখুন।

— মিরো

এটি হেল্প.সিম্পলার: w3schools.com/jsref/… অনলোড ইভেন্টের সাথে

— ব্যবহারকারী 2290820

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 এটি আমার পক্ষে বিপরীত (আপনার পোস্টের ২ বছর হয়ে গেছে, তাই জিনিসগুলি পরিবর্তিত হতে পারে)। এটি কেবল তখনই কাজ করে $(document).ready( ...যখন আমি এই স্ক্রিপ্টটি আমার মোডালের জন্য একটি এমভিসি পার্টিশালভিউতে সংরক্ষণ করি যা যখন ব্যবহারকারী কোনও কিছুর উপরে ক্লিক করেন তখন ডায়নামিকভাবে যুক্ত হয়। হাস্যকরভাবে, কী করবেন না সে সম্পর্কে আপনার সতর্কতা আমাকে কীভাবে এটি আমার পক্ষে কাজ করে তা নির্ধারণের অনুমতি দেয়। সূতরাং ধন্যবাদ? :)

— মাইকটিভি

লুকান আমার পক্ষে (শ্রেণি হিসাবে) কাজ করে না, যেহেতু বুটস্ট্র্যাপ এটিকে ওভাররুল করে দেয় এবং তাই কিছুই দেখায় না। এটি দেখতে ভয়ঙ্কর লাগছিল (মডেলের মতো নয়) এবং আপনি বোতামটি টিপানোর সময় এটি বন্ধও হয় নি। জাভাস্ক্রিপ্ট অংশটি কাজ করেছে, তবে আমি গৌরব মহাল তার উত্তরে ব্যবহৃত মডেলের এইচটিএমএল অংশটি ব্যবহার করার পরামর্শ দিচ্ছি, তবে তার মডেলের ক্লাসে 'শো' শব্দটি সরিয়ে ফেলতে নোট করুন।

— মালাচি

প্রথম প্রথম jQuery লাইব্রেরি অন্তর্ভুক্ত করুন!

— ersks

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

মাথার জন্য প্রয়োজনীয় লিঙ্কগুলি প্রকাশের জন্য ধন্যবাদ :)

— ড্যানিয়েলাবি 67

আমার জন্য, এই কোডটি কেবলমাত্র সুন্দরভাবে চলছিল। ধন্যবাদ।

— Semmerket

Answer 5

আন্দ্রে এর ইলিখ যা বলেছে তা সম্পর্কিত আপনি যেটিকে jquery বলছেন তাতে লাইনের পরে আপনাকে জেএস স্ক্রিপ্ট যুক্ত করতে হবে:

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

যা দেখে মনে হয়েছিল কারণ মোডালটিতে আরিয়া-লুকানো = "সত্য" বৈশিষ্ট্য ছিল:

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

   যা ঘটবে তা হ'ল আপনার মডেলের জন্য এইচটিএমএল কোনও জাভাস্ক্রিপ্ট ছাড়াই পৃষ্ঠা লোডে লোড করা হবে (কোনও বিলম্ব নেই)। এই মুহুর্তে আপনি মডেলটি বন্ধ করতে পারবেন না, সেই কারণেই যখন সবকিছু লোড হয় তখন সঠিকভাবে মডেলটি লোড করার জন্য আমাদের কাছে ডকুমেন্ট ready রেডি স্ক্রিপ্ট রয়েছে। আমরা আসলে কাস্টম কোডটি সরিয়ে ফেলব এবং তারপরে। মডেল ('শো') দিয়ে মডেলটি (আবার) শুরু করব।

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

@ এডুয়ার্ডো কুমো হ্যাঁ, এটি কাজ করে যায় jsfiddle.net/bsmpLvz6 এই উদাহরণটি বুটস্ট্র্যাপ ৩.৩ এবং jQuery ২.২ ব্যবহার করে তৈরি করা হয়েছিল

— ফিলিপ লিমা

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

ব্যবহারকারী ছাড়াও জাভাস্ক্রিপ্ট ছাড়া কিন্তু সাথে রিফট উত্তরগুলি 254545728modal-backdrop in

3 টি জিনিস যুক্ত করতে হবে

1. modal-backdrop in.মডাল ক্লাসের আগে ক্লাসগুলির সাথে একটি ডিভ
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

বুটস্ট্র্যাপ ৪-এর জন্য মডেল মার্কআপটি কিছুটা বদলেছে page

$(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/components/modal/#via-data-attributes

— মাইকে

Answer 14

বুটস্ট্র্যাপ 3-এ আপনাকে কেবল জেএস-এর মাধ্যমে মডেলটি আরম্ভ করতে হবে এবং পৃষ্ঠাটির মুহুর্তে মোডাল মার্কআপ পৃষ্ঠায় থাকলে মোডাল প্রদর্শিত হবে।

আপনি যদি এটি প্রতিরোধ করতে চান তবে আপনি show: falseযেখানে মডেলটি শুরু করবেন সেখানে বিকল্পটি ব্যবহার করুন । এটার মতো কিছু: $('.modal').modal({ show: false })

Answer 15

jquery.jsদ্রুত পৃষ্ঠা লোডের জন্য আপনি পিছিয়ে রাখতে চাইতে পারেন । তবে jquery.jsমুলতুবি পেলে $(window).loadকাজ নাও করতে পারে। তাহলে আপনি চেষ্টা করতে পারেন

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

পৃষ্ঠাটি সম্পূর্ণরূপে লোড হওয়ার পরে এটি আপনার মডেলটি পপআপ করবে (জ্যাকুয়ারি সহ)

Comments

ডোম প্রস্তুত হওয়ার জন্য একটি সময়সীমা নির্ধারণ করা চূড়ান্ত খারাপ অভ্যাস .. যদি ব্যবহারকারীর মন্থর সংযোগ থাকে তবে কী হবে? এটি 10 ​​সেকেন্ড নিতে পারে তার চেয়ে বেশি .. সুতরাং কখনই এটি করবেন না

— ডাচক্যাভ

Answer 16

বুটস্ট্রেপকে উপচে পড়া ও এটির চমত্কারতা হারাতে এড়াতে কেবল একটি নিয়মিত লঞ্চ বোতামটি তৈরি করুন, এটি একটি আইডি সরবরাহ করুন, এবং জ্যাকুয়ারি ব্যবহার করে 'এটি ক্লিক করুন': লঞ্চ বোতামটি:

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