莫代尔没有开放

Question

我对编码很陌生，我一直在努力创建一个用作用户界面的wepage。在用户界面中，有一些按钮可以使用javaScript启动应用程序（当时还没有），还有两个按钮可以打开当前屏幕上的模态：帮助和设置。

模态代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button class="btn btn-default" data-toggle="modal" data-target="#settings">
  <img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
  <img src="img/help.png" alt="" class="img-circle">
</button>


<div id="settings" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Settings</h3>
      </div>
      <div class="modal-body">
        <h4> Tethering</h4>
        <label>Name:</label>
        <input type="text" id="wlanName" size="15">
        <label>Passphrase:</label>
        <input type="text" id="passPhrase" size="15">
        <br>
        <br>
        <button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
        <button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
  

  <div id="help" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Help</h3>
        </div>
        <div class="modal-body">
          *CONTENT TO BE MADE*
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>

问题是，第一个模态工作正常。第二种模式只是“暗淡”背景，但它自己的模态不会变得可见。在这种情况下，设置工作正常，但帮助没有。如果在设置代码之前交换帮助代码，则帮助工作和设置不会。

但是，当我编码时，我有错字。模态的第二个div是键入的      在我换了之后，而不是一切都工作了

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button class="btn btn-default" data-toggle="modal" data-target="#settings">
            <img src="img/settings.png" alt="" class="img-circle">
        </button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
            <img src="img/help.png" alt="" class="img-circle">
        </button>
   
        <div id="settings" class="modal fade" role="dialog">
        	<div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Settings</h3>
                </div>
                <div class="modal-body">
                    <h4> Tethering</h4>
                    <label>Name: </label>
                    <input type="text" id="wlanName" size="15">
                    <label>Passphrase: </label>
                    <input type="text" id="passPhrase" size="15">
                    <br>
                    <br>
                    <button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
                    <button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            	</div>
       		 </div>
   		 </div>
   		 </div>

          



      
    <div id="help" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Help</h3>
                </div>
                <div class="modal-body">
                      *CONTENT TO BE MADE*
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            	</div>
        	</div>
   		 </div> 
   	</div>

您忘了提及</div>

希望这有效。

Answer 2

您缺少模态div的结束标记。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button class="btn btn-default" data-toggle="modal" data-target="#settings">
  <img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
  <img src="img/help.png" alt="" class="img-circle">
</button>


<div id="settings" class="modal fade" role="dialog">
  <div class="modal-dialog" >

    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Settings</h3>
      </div>
      <div class="modal-body">
        <h4> Tethering</h4>
        <label>Name:</label>
        <input type="text" id="wlanName" size="15">
        <label>Passphrase:</label>
        <input type="text" id="passPhrase" size="15">
        <br>
        <br>
        <button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
        <button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  <div id="help" class="modal fade" role="dialog">
    <div class="modal-dialog" >

      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Help</h3>
        </div>
        <div class="modal-body">
          *CONTENT TO BE MADE*
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;