it-swarm.asia

قم بتشغيل Bootstrap Modal عند تحميل الصفحة

أنا لا أعرف جافا سكريبت على الإطلاق. وثائق bootstrap يقول ل

اتصل بالشرط عبر javascript: $ ('# myModal'). مشروط (خيارات)

ليس لدي أدنى فكرة عن كيفية استدعاء هذا على تحميل الصفحة. باستخدام الكود الذي تم توفيره في صفحة bootstrap ، يمكنني الاتصال Modal بنجاح بنقرة عنصر ، لكنني أريد أن يتم تحميله فورًا عند تحميل الصفحة.

191
Brandon

كل ما عليك هو لف الشرط الذي تريد الاتصال به عند تحميل الصفحة داخل حدث مسج load في القسم الرئيسي للمستند ويجب أن يكون منبثقًا ، مثل ذلك:

JS

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

HTML

<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>
359
Andres Ilich

لا تحتاج javascript لإظهار الوسائط

أبسط طريقة هي استبدال "إخفاء" بكلمة "في"

class="modal fade hide"

وبالتالي

class="modal fade in"

وتحتاج إلى إضافة onclick = "$('.modal').hide()" على زر إغلاق ؛

ملاحظة: أعتقد أن أفضل طريقة هي إضافة سكريبت jQuery:

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

فقط أضف ما يلي

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>
39
GAURAV MAHALE

يمكنك تجربة هذا runnable code-

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

يمكن العثور على المزيدهنا.

أعتقد أن لديك إجابة كاملة.

17
Abrar Jahin

فيما يتعلق بما يقوله Andre's Ilich ، يتعين عليك إضافة البرنامج النصي js بعد السطر فيما تسمونه في 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>

في حالتي كانت هذه هي المشكلة التي نأمل أن تساعد

7
JPCS

يمكنك تنشيط الوسائط دون كتابة أي جافا سكريبت ببساطة عبر سمات البيانات.

يُظهر خيار "show" الذي تم تعيينه على true الوسيطة عند التهيئة:

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

في حالتي ، لم تضف إضافة jQuery لعرض الوسائط:

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

الذي يبدو أنه بسبب أن مشروط قد عزا aria-hidden = "صواب":

<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 إلى إيقاف تشغيل المودم من القدرة على الإغلاق.

5
Highly Irregular

هيريس حلا [بدون تهيئة جافا سكريبت!]

لم أتمكن من العثور على مثال بدون تهيئة الشرط الخاص بك باستخدام javascript ، $('#myModal').modal('show') ، لذا فهي تقدم اقتراحًا حول كيفية تطبيقه بدون javascript delay on page load.

  1. تحرير div حاوية حاوية مشروط مع الفئة والأناقة:

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

  1. تعديل جسمك مع الطبقة والأناقة:

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

  2. إضافة div خلفية مشروط

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

  3. إضافة النصي

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

    ما سيحدث هو أنه سيتم تحميل html الخاص بموديلك عند تحميل الصفحة دون أي javascript ، (بدون تأخير). في هذه المرحلة ، لا يمكنك إغلاق المشروط ، ولهذا السبب لدينا البرنامج النصي document.ready ، لتحميل المشروط بشكل صحيح عندما يتم تحميل كل شيء. سنقوم فعليًا بإزالة الشفرة المخصصة ثم تهيئة الشرط (مرة أخرى) باستخدام .modal ('show').

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

يمكنك إظهاره في البداية حتى بدون Javascript. مجرد حذف فئة "إخفاء".

class="Modal"
3
SPIELER

تم اختباره مع Bootstrap 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/

3
Felipe Lima

في bootstrap 3 ، تحتاج فقط إلى تهيئة المشروط من خلال js ، وإذا كانت علامة الوسائط في لحظة تحميل الصفحة موجودة في الصفحة ، فسوف يظهر المشروط.

في حال كنت ترغب في منع ذلك ، استخدم الخيار show: false حيث يمكنك تهيئة المشروط. شيء مثل هذا: $('.modal').modal({ show: false })

2
Stafie Anatolie

بالإضافة إلى user2545728 وإجابات Reft ، بدون javascript لكن مع modal-backdrop in

3 أشياء لإضافتها

  1. div مع الفئات modal-backdrop in قبل فئة .modal
  2. style="display:block;" إلى فئة .modal
  3. fade in مع فئة .modal

مثال

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

كما ذكر الآخرون ، قم بإنشاء مشروطك مع عرض: block

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

أتمنى أن يساعدك هذا

1
jBelanger

التحديث 2018 - Bootstrap 4

لقد تغيرت العلامات المشروطة بشكل طفيف بالنسبة لـ Bootstrap 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>

عرض توضيحي على Codeply

1
Zim

مثال بسيط جعل محمل الغزل من مشروط bootstrap

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

قد ترغب في الاحتفاظ بـ jquery.js مؤجلاً لتحميل الصفحات بشكل أسرع. ومع ذلك ، إذا تم تأجيل jquery.js ، فقد لا تعمل $(window).load. ثم قد تحاول

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

سوف يطفو على السطح مشروطك بعد تحميل الصفحة بالكامل (بما في ذلك مسج)

0
Viktor Ka

إذا كنت ترغب في إظهار الوسائط عندما لا تزال الصفحة قيد التحميل ،

Call $("modal_selector").modal("show")inside$("document").ready()function ،

و إغلاق هناك في$(window).on("load")حدث!



لماذا؟ see: https://stackoverflow.com/a/3698214/9438347

0
Squidward Tentacles