首頁>Program>source

我在一个名為 menu.html的頁面中有一个锚點 而且我在获取引匯程式模式以顯示另一个名為 Lab6.html的頁面中的資料時遇到了麻煩

menu.html

<div class="collapse navbar-collapse navbar-exl-collapse">
  <ul class="nav navbar-nav" id="menu">
    <li><a href="/emplookup.html">Lookup</a></li>
    <li><a href="/modalexample.html">Modals</a></li>
    <li><a href="/Lab6.html#theModal" data-toggle="modal">Lab 6</a></li><!-- this one -->
  </ul>
</div>

Lab6.html

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h1>Lab 6</h1>
      </div>
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-heading text-center">
            Employee Information
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="text-right col-xs-2">Title:</div>
              <div class="text-left col-xs-3" id="title"></div>
              <div class="text-right col-xs-2">First:</div>
              <div class="text-left col-xs-3" id="firstname"></div>
            </div>
            <div class="row">
              <div class="text-right col-xs-2">Phone#</div>
              <div class="text-left col-xs-3" id="phone"></div>
              <div class="text-right col-xs-2">Email</div>
              <div class="text-left col-xs-3" id="email"></div>
            </div>
            <div class="row">
              <div class="text-right col-xs-2">Dept:</div>
              <div class="text-left col-xs-3" id="departmentname"></div>
              <div class="text-left col-xs-2">Surname:</div>
              <div class="text-left col-xs-4">
                <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="panel-footer">
            <input type="button" value="Find Employee" id="empbutton" />
            <div class="col-xs-10" id="lblstatus"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

我做錯什麼了吗?

最新回復
  • 5月前
    1 #

    Update

    您試圖从另一頁获取模式內容的方法不正確。

    根据Bootstrap的文件:

    If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div.如果 您正在使用資料API,也可以使用href 屬性以指定遠端源.顯示了一个例子 下方:

    <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
    

    因此,首先,您應该更改您的 menu.html 檔案類似於上面的代碼:

    <li><a href="Lab6.html" data-target="#theModal" data-toggle="modal">Lab 6</a></li>
    

    然後,成為你的一部分 頁面必须位於您的 Lab6.html內部 頁.例如:

    menu.html
    

    最後,你的 <div class="modal fade text-center" id="theModal"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div> 將只有 LAB6.html內部的代碼 .例如:

    .modal-content
    

    看看我為您建立的plnkr。

  • 5月前
    2 #

    請註意,如果您使用的是Bootstrap 4,則接受的答案將不起作用,因為根据Bootstrap關於 <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">X</button> <h1>Lab 6</h1> </div> <div class="modal-body"> <div class="panel panel-default"> <div class="panel-heading text-center"> Employee Information </div> <div class="panel-body"> <div class="row"> <div class="text-right col-xs-2">Title:</div> <div class="text-left col-xs-3" id="title"></div> <div class="text-right col-xs-2">First:</div> <div class="text-left col-xs-3" id="firstname"></div> </div> <div class="row"> <div class="text-right col-xs-2">Phone#</div> <div class="text-left col-xs-3" id="phone"></div> <div class="text-right col-xs-2">Email</div> <div class="text-left col-xs-3" id="email"></div> </div> <div class="row"> <div class="text-right col-xs-2">Dept:</div> <div class="text-left col-xs-3" id="departmentname"></div> <div class="text-left col-xs-2">Surname:</div> <div class="text-left col-xs-4"> <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" /> </div> </div> </div> </div> <div class="modal-footer"> <div class="panel-footer"> <input type="button" value="Find Employee" id="empbutton" /> <div class="col-xs-10" id="lblstatus"></div> </div> </div> </div>的文件 選項:

    remote

    我们建議改為使用客戶端模板或資料繫結框架,或者自己呼叫jQuery.load。

    如果提供了遠端URL,則將通過jQuery的 This option is deprecated since v3.3.0 and has been removed in v4.載入一次內容 方法並註入到 load div.如果您使用的是資料API,則可以選擇使用 .modal-content 屬性以指定遠端源.一个示例如下所示:

    href
    

    要使其正常工作,請先删除 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>data-target 鏈接中的屬性.你可以离開 data-toggle 屬性。

    href
    

    使用jQuery,我们可以將點击监听器添加到 <li><a href="Lab6.html" class='li-modal'>Lab 6</a></li> 元素,但我们不想直接进入 <a>指示的頁面 屬性,所以我们使用 href .通過簡單地使用jQuery的load方法,我们可以載入 preventDefault()的內容 进入 lab6.html頁面

    modal-content
    

    此處是完整示例.

    $('.li-modal').on('click', function(e){ e.preventDefault(); $('#theModal').modal('show').find('.modal-content').load($(this).attr('href')); });

  • oop:Java是100%面向物件的吗?
  • javascript:jQuery驗證動態表單輸入上的插件不起作用