如何创建一个JS脚本应用到多个引导情态动词在一个页面上

Question

我想建立一个页面，14个不同的情态动词。我以前设置，以便他们都会正常打开，和他们为之奋斗。但是，我发现了一些让我让他们可拖动打开时。所以我想弄清楚如何做到这一点，终于拿到了它的工作，但只有一个模式。我的其他情态动词不打开，除非我修改代码以反映该名称，而不是模态。然后第一个模式是行不通的。请告诉我如何使全身所有我的情态动词的JavaScript代码。

这里是我的脚本代码：

<script type="text/javascript">
window.onload=function(){

$('#btn1').click(function() {
  // reset modal if it isn't visible
  if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
      top: 110,
      left: 500
    });
  }
  $('#modal1').modal({
    backdrop: true,
    show: true
  });

  $('.modal-dialog').draggable({
    handle: ".modal-header"
  });
});


    }

</script>

这里是我的情态的代码，只有两个情态动词，而不是所有14：

<button id="btn1" class="btn btn-info btn-lg" data-target="#modal1">Modal     1</button>

<div class="modal fade" id="modal1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" aria-label="Close"><span     aria-hidden="true">×</span></button>
        <h4 class="modal-title" >Modal 1</h4>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
<button id="btn2" class="btn btn-info btn-lg" data-target="#modal2">Modal 2</button>

<div class="modal fade" id="modal2" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" aria-label="Close"><span     aria-hidden="true">×</span></button>
        <h4 class="modal-title" >Modal 2</h4>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
      </div>
    </div>
  </div>
</div>

如果我的一个我有一个新的“#btn”和/或新的“#modal”之后添加另一个脚本，后者只适用。

如果我的第一个“BTN”和或“模式”之后加上一个逗号，它使两个情态动词重叠。

有人能帮助吗？我究竟做错了什么？