Question

我正在尝试做一些我认为很多人已经做过的事情;并阅读了一些例子等;并试图拼凑我需要但没有运气的东西。我想要做的是有一个按钮将变量传递给bootstrap模式。然后以某种方式回显或打印模态中的变量，所以我知道它正在工作。我从我找到的例子中构建了一些代码

这是我的按钮：

<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button"  data-yourParameter="<?php echo $image_id; ?>">Upload Images
             </button>

我不确定我是否可以回显要传递的变量的图像ID，但是之前已经完成了很多这样的事情，所以看起来它可以（这可能是一个问题）

其次 - 这是我的模态：

<div id="upload-images-modal" class="modal fade"  tabindex="-1"  role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
  </div>
  <div class="modal-body">
       ok ok ok

<script>
$('#upload-images-modal').on('show.bs.modal', function(e) {
 var yourParameter = e.relatedTarget.dataset.yourparameter;
  // Do some stuff w/ it.
 alert(yourParameter);

 });

 </script>

  </div>
  <div class="modal-footer">
    <button type="button" class="button" data-dismiss="modal">Cancel</button>
    <button type="button" class="button">Add Images</button>
  </div>
</div>

关于此的几点说明。我真的不确定脚本应该放在哪里＆＃34;放置＆＃34;与模态有关。所以我只是放在模态体中。

我尝试发出警报以查看传递的变量。什么都没发生。所以我希望有人可以给我一些关于我做错事的指示。

非常感谢，

杰拉德

Answer 1

您的问题可能是使用未通过$('#upload-images-modal').on('show.bs.modal', function(e, f, g) { var yourParameter = e.relatedTarget.dataset.yourparameter; // Do some stuff w/ it. alert(yourParameter); });的早期版本的bootstrap。

关于你的js，把它放在身体的底部或者从身体底部和任何库之后的单独的js文件引用中，即jquery和bootstrap。

以下是使用最新bootstap版本的代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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.6/js/bootstrap.min.js"></script>


<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="test">Upload Images
</button>

<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
      </div>
      <div class="modal-body">
        ok ok ok
        <button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="button" data-dismiss="modal">Cancel</button>
        <button type="button" class="button">Add Images</button>
      </div>
    </div>
    <!-- Modal -->
    <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Standard Selectpickers</h3>
      </div>
      <div class="modal-body">

        <select class="selectpicker" data-container="body">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
        </select>

      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>

  </div>

{{1}}

帮助将变量传递给bootstrap模态

1 个答案: