বন্ধ করার জন্য কীভাবে টুইটার বুটস্ট্র্যাপ মডেল পাবেন (প্রাথমিক প্রবর্তনের পরে)

Question 1

আমি খুব নুব, তাই আমি মনে করি আমি টুইটার বুটস্ট্র্যাপ মডেলের সাথে কিছু (সম্ভবত স্পষ্ট) পর্যবেক্ষণ করছি। আমি যা করার চেষ্টা করছি তা হ'ল কেবল মোবাইলে লঞ্চ করার মডেল get মোডাল ডিভের উপর ক্লাব .ভিভিসিবল-ফোন যুক্ত করার সাথে এটি সূক্ষ্ম কাজ করে। এ পর্যন্ত সব ঠিকই. তবে তারপরে আমি এটিটি কাজ করতে চাই, এর অর্থ আপনি এটি এক্স বোতাম দিয়ে এটি বন্ধ করতে পারেন। এবং আমি কাজ করতে বোতাম পেতে পারি না।

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

এইচটিএমএলের নীচে আমি jquery.js (প্রথম) এবং bootstrap.modal.js এবং bootstrap.transition.js রেখেছি। বাস্তবে সমস্ত বুটস্ট্র্যাপ জেএস মডিউল (একটি অন্তর্ভুক্ত মিস করবেন না)। আমি জেএস নিয়ে অভিজ্ঞ নই ..

আমি যদি সত্যিই বোকা প্রশ্ন করি তবে দয়া করে আমাকে ক্ষমা করুন I লগের এই নির্দিষ্ট পরিস্থিতির উত্তর আমি খুঁজে পাই না।

Question 2

$('#myModal').modal('hide') এটা করা উচিত

Question 3

বুটস্ট্র্যাপ মডেল ডায়ালগটি বন্ধ করার সাথে আমার সমস্যা হয়েছিল, যদি এটি দিয়ে খোলা থাকে:

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

ডায়লগটি খোলার জন্য আমি এই সমস্যাটি নীচের লিঙ্কটি দিয়ে সমাধান করেছি:

<a href="#myModal" data-toggle="modal">Open my dialog</a>

সূচনা ভুলে যাবেন না:

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

আমি ক্লোজিং বোতামের জন্য নিম্নলিখিত বৈশিষ্ট্যগুলিও ব্যবহার করেছি:

data-dismiss="modal" data-target="#myModal"

Question 4

মডেলে ক্লাস হাইড যুক্ত করুন

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

জাভাস্ক্রিপ্ট কোড

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>

Question 5

.modal ('hide') ম্যানুয়ালি একটি মডেল লুকায়। আপনার বুটস্ট্র্যাপ মডেলটি বন্ধ করতে নিম্নলিখিত কোডগুলি ব্যবহার করুন

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

এখানে কোডেপেন কাজ করে দেখুন

বা

এখানে চেষ্টা করুন

কোড স্নিপেট দেখান

$(function () {
    $(".custom-close").on('click', function() {
        $('#myModal').modal('hide');
    });
});

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

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
          
          <a class="custom-close"> My Custom Close Link </a>
          
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

স্নিপেট প্রসারিত করুন

Question 6

বোতামটি ডেটা-টার্গেটের সাথে বন্ধ হওয়া উচিত ঠিক সেই মডেলটি উল্লেখ করার চেষ্টা করুন। সুতরাং আপনার বোতামটি নিম্নলিখিতগুলির মতো হওয়া উচিত -

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

এছাড়াও, আপনার কেবল বুটস্ট্রেপ.মডাল.জে প্রয়োজন হবে যাতে আপনি অন্যকে নিরাপদে অপসারণ করতে পারেন।

সম্পাদনা করুন: যদি এটি কাজ না করে তবে দৃশ্যমান-ফোন শ্রেণিটি সরিয়ে ফেলুন এবং ফোনের পরিবর্তে এটি আপনার পিসি ব্রাউজারে পরীক্ষা করুন। এটি আপনাকে জাভাস্ক্রিপ্টের ত্রুটিগুলি পাচ্ছে কিনা বা উদাহরণস্বরূপ এটির কোনও সামঞ্জস্যতার সমস্যা কিনা তা প্রদর্শিত হবে।

সম্পাদনা করুন: ডেমো কোড

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>

Question 7

ডকুমেন্টেশন অনুযায়ী লুকান / টগল কাজ করা উচিত। তবে তা হয় না।

এখানে আমি এটি কীভাবে করেছি

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body

Question 8

এটি চেষ্টা করুন ..

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

Question 9

আইফোন বা ডেস্কটপে আমার একই সমস্যা ছিল, ক্লোজ বোতামটি টিপে ডায়ালগটি বন্ধ করতে পারিনি।

আমি খুঁজে পেয়েছি যে <button>ট্যাগটি একটি ক্লিকযোগ্য বাটনটি সংজ্ঞায়িত করে এবং নীচের হিসাবে কোনও উপাদানটির জন্য ধরণের বৈশিষ্ট্য নির্দিষ্ট করতে হবে:

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

বুটস্ট্র্যাপ মডেলের জন্য উদাহরণ কোডটি এখানে পরীক্ষা করুন: বুটস্ক্র্যাপ জাভাস্ক্রিপ্ট পৃষ্ঠা

Question 10

আপনি কয়েক মোডাল একযোগে দেখানো হয়েছে আপনি বৈশিষ্ট্যাবলী সাথে ইন-মোডাল বোতামটি লক্ষ্য মোডাল নির্দিষ্ট করতে পারেন data-toggleএবং data-target:

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

মডেল কোডের বাইরে কোথাও আপনার অন্য টগল বোতাম থাকতে পারে:

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

এই বোতামগুলি লুকানো অবস্থায় ব্যবহারকারী ইন-মডেল টগল বোতামটি ক্লিক করতে পারে না এবং এটি "modal"বৈশিষ্ট্যের বিকল্পের সাথে কাজ করে data-toggle। এই স্কিমটি স্বয়ংক্রিয়ভাবে কাজ করে!

Question 11

পৃষ্ঠার রিফ্রেশ ছাড়াই কেবল মডেলগুলি বন্ধ করার জন্য এখানে একটি স্নিপেট রয়েছে তবে এন্টার টিপে যখন মোডাল জমা দেয় এবং রিফ্রেশ ছাড়াই বন্ধ হয়

আমি এটি আমার সাইটে সেট আপ করেছি যেখানে আমার একাধিক মডেল থাকতে পারে এবং কিছু মোডাল জমা দেওয়ার সময় ডেটা প্রক্রিয়া করে এবং কিছু না করে। আমি যা করি তা হ'ল প্রক্রিয়াজাতকরণের প্রতিটি মডেলের জন্য একটি অনন্য আইডি তৈরি। উদাহরণস্বরূপ আমার ওয়েবপৃষ্ঠায়:

এইচটিএমএল (মডেল পাদলেখ):

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

জ্যাকুয়েরি:

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

আপনি দেখতে পাচ্ছেন যে এই জমাটি প্রক্রিয়াকরণ সম্পাদন করে যা এই মডেলের জন্য আমার কাছে এই jQuery রয়েছে। এখন বলা যাক যে এই ওয়েবপৃষ্ঠায় আমার কাছে আরও একটি মডেল রয়েছে তবে কোনও প্রসেসিং করা হয় না এবং যেহেতু একটি মডেল একবারে খোলা থাকে আমি অন্য $(document).ready()একটি বিশ্বব্যাপী পিএইচপি / জেএস স্ক্রিপ্টে রাখি যা সমস্ত পৃষ্ঠাগুলি পায় এবং আমি মোডালের ঘনিষ্ঠ বোতামটি বলে একটি শ্রেণি দেই ".modal-close":

এইচটিএমএল:

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery (Global.inc অন্তর্ভুক্ত):

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });