Question

sample.html：在此页面中，我有一个按钮，如下所示

<button data-toggle="modal" class="btn btn-info" onclick="location.href='home.html'" data-target="#testModal">button</button>

点击上面的按钮，打开一个名为home.cfm的模态，其内容如下

home.html：

<div id="testModal" class="modal fade" 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>

但没有模态正在打开。请帮助

Answer 1

您只需要调用home.html文件中的模态数据，因此请将以下代码放入您的sample.html文件中。

<button class="btn btn-info" onclick="show_modal('home.html','Home page','')">button</button>

<div class="modal fade bs-modal-sm" id="modal"  role="dialog"  aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog animated bounceIn">
        <div class="modal-content">
        </div>
    </div>
</div>

将一个函数添加到js文件中，并将该js文件的引用添加到sample.html中。

function show_modal(target, title, size) {

    jQuery('#modal').removeData('bs.modal');
    jQuery('.modal-content').html('');
    jQuery('.modal-dialog').removeClass('modal-lg');
    jQuery('#modal').removeClass('create_event_task');
    jQuery('.modal-dialog').addClass(size);
    var newTarget = target.indexOf("?") >= 0 ? target + '&modal-title=' + title : target + '?modal-title=' + title; 
    jQuery('#modal').modal({remote: encodeURI(newTarget)});
}

在home.html文件中添加以下代码。

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

我希望这对你有所帮助。

点击时引导模态问题

1 个答案: