Question

我正在使用bootstrap模式。在视图中，

<div id="basic" class="well modal fade" style="max-width:44em;">
  <div class="model-header">Send Push</div>
  <div class="model-body">
    <div class="top">
      <p>You are sending text push notifications to all devices.</p>
    </div>
    <div class="left" style="width: 100%;height: 100px;float: left;">
      <table style="margin-top: 10px;width: 100%">
        <tr>
          <th>Device Type</th>
          <th>Device Count</th>
          <th>Remaining</th>
        </tr>
        <tr id="row1">
          <td>IOS</td>
          <td></td>
          <td>0</td>
        </tr>
        <tr id="row2">
          <td>Android</td>
          <td></td>
          <td>0</td>
        </tr>
      </table>
    </div>
    <div class="right" style="width: 100%;height: 250px;float: left;">
      <div style="width: 100%;height: 55px;margin-top: 25%" id="spinner">

      </div>
      <div id="spinner1" style="width: 100%;text-align: center">Please be patient.This may take awhile</div>
    </div>
  </div>
</div>

用于显示模态的脚本，

     $('#notificationform').ajaxForm({
                            beforeSubmit: validate,
                            beforeSend: function () {
                                $('#spinner1').html('Initializing');
                                $('.modal-header').html('Initializing');
                                $('.top,.left').hide();

                                   $('#basic').popup('show');
                                showLoader();
                            },
                            complete: function (xhr) {
                                var response = xhr.responseText;
                                var status = xhr.status;
                                if (status == '200') {
                                    var res = response.split("<!DOCTYPE html>");
                                    var obj = $.parseJSON(res[0]);

这个模态正在显示的ajaxform函数，但我想在beforesend函数中显示模态。但是这段代码没有用。我想显示弹出窗口，但它没有显示任何内容。请帮我。如何解决这个问题。

Answer 1

使用适当的库和最新的库进行模态...

查看最后一段..

＆＃13;

$("#myBtn").click(function(){
        $("#basic").modal('show');
    });

＆＃13;

<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.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<div id="basic" class="well modal fade" style="max-width:44em;">
            <div class="model-header">Send Push</div>
            <div class="model-body">
                <div class="top">
                    <p>You are sending text push notifications to all devices. </p>
                </div>
                <div class="left" style="width: 100%;height: 100px;float: left;">
                    <table style="margin-top: 10px;width: 100%">
                        <tr>
                            <th>Device Type</th>
                            <th>Device Count</th>
                            <th>Remaining</th>
                        </tr>
                        <tr id="row1">
                            <td>IOS</td>
                            <td></td>
                            <td>0</td>
                        </tr>
                        <tr id="row2">
                            <td>Android</td>
                            <td></td>
                            <td>0</td>
                        </tr>
                    </table>
                </div>
                <div class="right" style="width: 100%;height: 250px;float: left;">
                    <div style="width: 100%;height: 55px;margin-top: 25%" id="spinner">

                    </div>
                    <div id="spinner1" style="width: 100%;text-align: center">Please be patient.This may take awhile</div>
                </div>
            </div>
        </div>

＆＃13;

Bootstrap模式未显示

1 个答案: