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

আপনার শো বিকল্পটিতে আপনার একটি টাইপ রয়েছে। এটি একটি বুলিয়ান লাগে, সুতরাং 'মিথ্যা' - $ ('# মাই-মডেল') এর কাছাকাছি কোট রাখবেন না mod মডেল ({প্রদর্শন: মিথ্যা});

— ড্যারেন পার্কার

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

আমি নিশ্চিত না কেন এটি আমার ক্ষেত্রে কাজ করে না। আমার পৃষ্ঠায় আমার একই ডেমো কোড রয়েছে এবং আমি উপরের মতো সাবমিট বোতামটি কোড করেছিলাম। যাইহোক, আমি যখন জমাটি ক্লিক করি তখন মোডাল উইন্ডোটি দ্রুত ঝলমলে হয়ে যায়। পৃষ্ঠাটি ফিরে পেতে আমাকে ব্রাউজারের 'ফিরে' বোতামে ক্লিক করতে হবে।

— ক্রিস 22

আমি আমার মন্তব্য উপরে এখানে anwser পাওয়া গেছে । সাইটের পৃষ্ঠাগুলিতে bootrap.js এর নকল লিঙ্ক।

— ক্রিস 22

আনকাচড টাইপ এরির: $ (...) মডেল কোনও ফাংশন নয়, এটি সম্ভবত আমার কিন্তু কোনও ধারণা কেন আমি এই ত্রুটিটি পাই? (আমার কাছে jQuery আছে)

— ভ্লাদিমির ভার্চলে

আমি আমার সমস্যাটি জানতে পেরেছিলাম, আমি জেকুরির অন্তর্ভুক্ত একটি ফাইল ডাইনিতে একটি অজ্যাক্স কল করেছি। 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

স্পষ্ট করার জন্য: "জাভাস্ক্রিপ্ট ব্যবহার করার দরকার নেই" এর অর্থ "জাভাস্ক্রিপ্ট লেখার দরকার নেই", জাভাস্ক্রিপ্ট এখনও ব্যবহৃত হচ্ছে। আমি উত্তরটি সম্পাদনা করার চেষ্টা করেছি তবে এটি প্রত্যাখ্যান হয়েছিল কারণ এটি "আরও সঠিক" ছিল না। যদি আপনি জাভাস্ক্রিপ্ট অক্ষম করে উপরের কোডটি চেষ্টা করেন তবে এটি কাজ করবে না। এর অর্থ আপনি আমার কাছে জাভাস্ক্রিপ্ট ব্যবহার করেন।

— n ব্যাখ্যাto

Answer 3

প্রায়শই, যখন $('#myModal').modal('show');কাজ করে না, jQuery দু'বার অন্তর্ভুক্ত করার কারণে এটি ঘটে। 2 বার jQuery সহ মডেলগুলি কাজ না করার জন্য তৈরি করে।

আবার কাজ করতে লিংকগুলির মধ্যে একটি সরান।

তদ্ব্যতীত, কিছু প্লাগইন ত্রুটি সৃষ্টি করেও এক্ষেত্রে অ্যাড করুন

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

Comments

এটি প্রিপেইজড জিকুয়েরি সংস্করণযুক্ত ডেটা টেবিলগুলি আমার জন্য এটি করেছে

— ওয়েসলি স্মিথ

আপনাকে অনেক ধন্যবাদ. আমার একই সমস্যা হচ্ছে: মডেল কোনও ফাংশন নয়। তবে jQuery.noConflict () যুক্ত করার পরে, এটি কাজ করে।

— জোবায়ের আহাম্মেদ

এটি লক্ষ করা উচিত যে আপনি যদি মূল কারণটি সমাধান করতে না পারেন (তবে শুধুমাত্র একবার jQuery একবার অন্তর্ভুক্ত করবেন) তবে এই কর্মপরিকল্পনাটি কেবলমাত্র ব্যবহার করা উচিত। যদি কিছু তৃতীয় পক্ষের প্লাগইন এটি অন্তর্ভুক্ত করে থাকে তবে হয় অন্তর্ভুক্ত সংস্করণটি সন্ধান করুন বা একটি তৈরি করতে তৃতীয় পক্ষের সাথে যোগাযোগ করুন।

— rybo111

Answer 4

jQueryনির্বাচক ব্যবহার করে কেবলমাত্র মডেল পদ্ধতিতে (কোনও পরামিতি ছাড়াই) কল করুন ।

এখানে উদাহরণ:

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

Comments

আমি কীভাবে আমার মডেলের আরও পরামিতিগুলি পাস করব? উদাহরণস্বরূপ, একটি নির্দিষ্ট (গতিশীল) আইডি?

— পাঠ্রস

আপনি কীভাবে আপনার আইডিটিকে গতিশীল করতে পারেন? আপনি কি এটি আইডি দিয়ে তৈরি করেন? যদি হ্যাঁ, আপনি বর্তমান বস্তুটি নির্বাচনের জন্য jQuery থেকে $ (এটি) কার্যকারিতাটি ব্যবহার করতে পারেন এবং তার কাছে প্যারামিটারগুলি পাস করতে পারেন।

— ব্রেন

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

আমি ডাব্লু 3 স্কুলগুলিতে একটি ডেমো তৈরি করেছি ।

<!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- প্রথম বুটস্ট্র্যাপ.মিন.সিএসএস 2- jquery.min.js 3- বুটস্ট্র্যাপ.মিন.জেএস

(অন্য কথায় jquery.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")?

— জেমস এ মোহলার

@ নভেম্বারস্কি, আপনার কোড কোডের ভিতরে থাকা দরকার হয় ক্লিক ইভেন্ট বা পৃষ্ঠাটি যখন jquery ব্যবহার করে লোড করুন: $ (নথি) .ডিডি (ফাংশন () {$ ("# মাইমোডাল")। মডেল ();});

— অভিজিৎ কুমার

Answer 9

ফাংশনটি কল করার সময় $ সাইন এর পরিবর্তে jQuery ব্যবহার করার চেষ্টা করুন , এটি নীচে দেখতে পাওয়ায় এটি আমার ক্ষেত্রে কাজ করেছে।

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

jQuery.noConflict (); কারণ যখন jQuery ('# মাইমোডাল')। মডেল ('শো'); কাজ করে না, দুবার jQuery অন্তর্ভুক্ত করার কারণে এটি ঘটে। 2 বার jQuery সহ মডেলগুলি কাজ না করার জন্য তৈরি করে। এবং এটি সেই ক্ষেত্রে সমস্যার সমাধান করবে, যেমনটি আমার ক্ষেত্রে এটি পুনরাবৃত্তি করছে।

আরও আপনি এই লিঙ্কে যেতে পারেন

বুটস্ট্র্যাপ মডেল উইন্ডোটি জিকুয়েরির মাধ্যমে কল করে দেখানো হচ্ছে না

Answer 10

চেষ্টা

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

আইডি মাইমোডাল দিয়ে মডেলটি খুলতে বা বন্ধ করতে।

যদি উপরেরটি কাজ না করে থাকে তবে এর অর্থ বুটস্ট্র্যাপ.জেগুলি অন্য কিছু জেএস ফাইল দ্বারা ওভাররাইড করা হয়েছে। এখানে একটি সমাধান

1: - বুটস্ট্র্যাপ.জে গুলি নীচে সরান যাতে এটি অন্যান্য জেএস ফাইলগুলিকে ওভাররাইড করে।

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>