如何在一个页面上创建JS脚本以应用于多个Bootstrap模态

Question

I am trying to set up a page with 14 different modals. 我正在尝试建立一个包含14种不同模式的页面。 I previously set them up so they would all open normally, and they've worked. 我之前已经对其进行了设置，以便它们都可以正常打开，并且它们已经起作用。 But I found something to let me make them draggable when opened. 但是我发现了一些让我在打开时可以拖动的东西。 So I am trying to figure out how to do that, and finally got it to work, but only with one modal. 所以我试图弄清楚该怎么做，最后使它起作用，但只能使用一种模式。 My other modals do not open unless I change the code to reflect the name of that modal instead. 除非更改代码以反映该模式的名称，否则其他模式不会打开。 Then the first modal doesn't work. 然后第一个模态不起作用。 Please tell me how to make the JavaScript code generalized for all of my modals. 请告诉我如何使我的所有模态通用化JavaScript代码。

Here is my script's code: 这是我的脚本代码：

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

Here is my modals' code, with only two modals instead of all 14: 这是我的模态代码，只有两个模态，而不是全部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>

If I add another script after the one I have with a new "#btn" and/or a new "#modal", the latter one only works. 如果在我拥有的脚本之后添加另一个脚本，并使用新的“ #btn”和/或新的“ #modal”，则后者仅适用。

If I add a comma after the first "btn" and or "modal", it makes the two modals overlap. 如果在第一个“ btn”和/或“模态”之后添加逗号，则会使两个模态重叠。

Can someone help please? 有人可以帮忙吗？ What am I doing wrong? 我究竟做错了什么？

Answer 1

If you would like to avoid setting all the modals in JavaScript (and assuming you don't want to add additional coding per each modal), could you just make them all toggle via HTML data attributes? 如果您想避免在JavaScript中设置所有模态（并且假设您不想为每个模态添加额外的编码），您是否可以通过HTML数据属性使它们全部切换？ Then you'd only need to initialize your draggable code. 然后，您只需要初始化可拖动代码。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Description of the page less than 150 characters">    
<title>Modals</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
</style>
</head>
<body>
      <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modal1Label">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Modal 1
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

      <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2Label" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="modal2Label">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  Modal 2
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>
<div class="container-fluid h-100">
<h1>Modals</h1>
<button type="button" id="btn1" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal1">Modal 1</button>
<button type="button" id="btn2" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal2">Modal 2</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>     
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.8/draggable.js" integrity="sha256-IqgasFC+xodVUxVInsmbOaKvevIOjh9iqPUBPd2tyVs=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
    $('.modal-dialog').draggable({
        handle: ".modal-header"
  });
});
</script>
</body>
</html>

如何在一个页面上创建JS脚本以应用于多个Bootstrap模态

问题描述

1 个解决方案

解决方案1
0 2019-02-03 03:12:54

如何在一个页面上创建JS脚本以应用于多个Bootstrap模态

问题描述

1 个解决方案

解决方案1 0 2019-02-03 03:12:54

解决方案1
0 2019-02-03 03:12:54