为什么bootstrap中的数据关闭不起作用?

时间:2018-01-24 01:13:31

标签: asp.net-mvc twitter-bootstrap

引导程序中的data-dismiss无效。它正在另一个项目中工作,但不在此项目中。请告诉我我哪里出错了。

 @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {   
       @Html.TextBoxFor(m => m.txtName)
       <button type="submit" id="submit" data-toggle="modal" data-target="#myModal">Produce Page</button>      
    } 

//My Modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
    ...
            <div class="modal-header">
                ...
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <button type="button" class="btn btn-secondary"><a href="~/MyHome/MyHome">Go to My Home</a></button>
                    </div>
          </div>

1 个答案:

答案 0 :(得分:1)

您可以尝试使用此代码段。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> @using (Html.BeginForm("Index", "Home", FormMethod.Post)) { @Html.TextBoxFor(m => m.txtName)
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> }




<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <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">
        @Html.Partial("My partial View")
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

    <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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

使用Pure Javascript的Bootstrap模式

(function() {
  "use strict";

  var Modal = function(el, options) {
    var self = this;

    this.el = document.querySelector(el);
    this.options = options;

    try {
      var list = document.querySelectorAll('#' + this.el.id + ' [data-dismiss="modal"]');
      for (var x = 0; x < list.length; x++) {
        list[x].addEventListener('click', function(e) {
          if (e) e.preventDefault();
          self.hide();
        });
      }
    } catch (e) {
      console.log(e);
    }
  };

  /**
   * Methods
   */
  Modal.prototype.show = function() {
    var self = this;
    // adding backdrop (transparent background) behind the modal
    if (self.options.backdrop) {
      var backdrop = document.getElementById('bs.backdrop');
      if (backdrop === null) {
        backdrop = document.createElement('div');
        backdrop.id = "bs.backdrop";
        backdrop.className = "modal-backdrop fade in";
        document.body.appendChild(backdrop);
      }
    }

    // show modal
    this.el.classList.add('in');
    this.el.style.display = 'block';
    document.body.style.paddingRight = '13px';
    document.body.classList.add('modal-open');
  };

  Modal.prototype.hide = function() {
    var self = this;
    // hide modal
    this.el.classList.remove('in');
    this.el.style.display = 'none';
    document.body.style = '';
    document.body.classList.remove('modal-open');

    // removing backdrop
    if (self.options.backdrop) {
      var backdrop = document.getElementById('bs.backdrop');
      if (backdrop !== null) document.body.removeChild(backdrop);
    }
  };


  /* Event */
  document.addEventListener('DOMContentLoaded', function() {
    var m = new Modal('#MyModal', {
      backdrop: true
    });
    document.getElementById('btn-open').addEventListener('click', function(e) {
      if (e) e.preventDefault();
      m.show();
    });
  });
})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> @using (Html.BeginForm("Index", "Home", FormMethod.Post)) { @Html.TextBoxFor(m => m.txtName)
<a href="#" id="btn-open" class="btn btn-info btn-lg">Click Me</a> }



<div id="MyModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>