Question

我在Service Portal（ServiceNow应用程序）中使用Angularjs 1.x和Bootstrap 3开发了一个网页。引导模式包含一些数据和指向整个页面的超链接（如下所示）。预期的行为是当用户点击超链接时，它应该将他带到不同的页面。但是，浏览器将他带到不同的页面并显示信息褪色/黑暗窗口。

HTML代码：

 <!-- Modal -->

<div class="modal fade" id="myModal" 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"> Potential Indicator </h4>
      </div>

      <div class="modal-body">
        <form name="indicatorModal" class="form-horizontal">
            <div class="form-group">
              <label class="control-label  col-sm-4">Indicator #: </label>
              <div class="col-sm-8"> 
                <label class="labeldata" id="indicatorId"></label>
            </div>
          </div>

           <div class="form-group">
              <label class="control-label  col-sm-4">Indicator Status: </label>
              <div class="col-sm-8"> 
                <label class="labeldata" id="indicatorStatus"></label>
            </div>
           </div>

           <div class="form-group">
                <label class="control-label  col-sm-4">Indicator Type: </label>
              <div class="col-sm-8"> 
                <label class="labeldata" id="indicatorType"></label>
            </div>
             <!-- <p class="form-group"><label>Indicator Type: </label> <label class="labeldata" id="indicatorType"> </label></p> -->
           </div>

           <div class="form-group">
             <label class="control-label col-sm-4">Urgency Ranking: </label>
              <div class="col-sm-8"> 
                <label class="labeldata" id="urgencyRanking"></label>
            </div>
                 <!-- <p><label>Urgency Ranking:  </label> <label class="labeldata" id="urgencyRanking"></label></p> -->
           </div>

           <div class="form-group">
             <label class="control-label col-sm-4">Completed Enrich Count:  </label>
              <div class="col-sm-8"> 
                <label class="labeldata" id="completedEnrichCount"></label>
            </div>
                 <!--<p><label>Completed Enrich Count:  </label> <label class="labeldata" id="completedEnrichCount"></label></p> -->
            </div>

            <div class="form-group">
              <label class="control-label col-sm-4">Enrich Start Timestamp:  </label>
              <div class="col-sm-8"> 
                <label class="labeldata" id="enrichStartTimestamp"></label>
            </div>
                     <!--<p><label>Enrich Start Timestamp:  </label> <label class="labeldata" id="enrichStartTimestamp"></label></p> -->
             </div>

             <div class="form-group">
               <label class="control-label col-sm-4">Enrich End Timestamp:  </label>
              <div class="col-sm-8"> 
                <label class="labeldata" id="enrichEndTimestamp"></label>
            </div>
                 <!--   <p><label>Enrich End Timestamp:  </label> <label class="labeldata" id="enrichEndTimestamp"></label></p> -->
              </div>

             <div class="form-group">
               <label class="control-label col-sm-4">Indicator Data : </label>
                 <div class="col-sm-8">     
                            <textarea class="form-control" rows="3" id="indicatorText" ng-readonly="true"> </textarea>
               </div>
             </div>

             <br/>
             <div class="form-group">
                    <a href="" id="indicatorLink"> Click here for More information</a>
             </div>
        </form>
      </div> 
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>  
</div>

Angular JS代码：

(function()
{
    "use strict";
    var app=angular.module('indicatorModal',[]);
    app.controller('incidentSummaryCtrl',['$scope',function($scope)
    {
        $scope.passSysId=function(indicatorSysId,indicatorType)
        {
            var ipIndicatorsData = JSON.parse(sessionStorage.getItem('ipIndicatorsData'));
            var domainIndicatorsData = JSON.parse(sessionStorage.getItem('domainIndicatorsData'));
            var hashCodeIndicatorsData = JSON.parse(sessionStorage.getItem('hashCodeIndicatorsData'));
            if(indicatorType == 'IP Address')
                {
                    for(var indicator in ipIndicatorsData )
                        {
                            if(ipIndicatorsData[indicator].sysId == indicatorSysId)
                                {
                                    jQuery("#indicatorId").text(ipIndicatorsData[indicator].indicatorId);
                                    jQuery("#indicatorStatus").text(ipIndicatorsData[indicator].indicatorStatus);
                                    jQuery("#indicatorType").text(ipIndicatorsData[indicator].indicatorType);
                                    jQuery("#urgencyRanking").text(ipIndicatorsData[indicator].urgencyRanking);
                                    jQuery("#completedEnrichCount").text(ipIndicatorsData[indicator].completedEnrichCount);
                                    jQuery("#enrichStartTimestamp").text(ipIndicatorsData[indicator].enrichStartTimestamp);
                                    jQuery("#enrichEndTimestamp").text(ipIndicatorsData[indicator].enrichEndTimestamp);
                                    jQuery("#indicatorText").text(ipIndicatorsData[indicator].indicatorText); 
                                    $("#indicatorLink").attr("href", "haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
                                }
                        }
                }
            else if(indicatorType == 'Full Qualified Domain Name (FQDN)')
                {
                    for(var indicator in domainIndicatorsData )
                        {
                            if(domainIndicatorsData[indicator].sysId == indicatorSysId)
                                {
                                    jQuery("#indicatorId").text(domainIndicatorsData[indicator].indicatorId);
                                    jQuery("#indicatorStatus").text(domainIndicatorsData[indicator].indicatorStatus);
                                    jQuery("#indicatorType").text(domainIndicatorsData[indicator].indicatorType);
                                    jQuery("#urgencyRanking").text(domainIndicatorsData[indicator].urgencyRanking);
                                    jQuery("#completedEnrichCount").text(domainIndicatorsData[indicator].completedEnrichCount);
                                    jQuery("#enrichStartTimestamp").text(domainIndicatorsData[indicator].enrichStartTimestamp);
                                    jQuery("#enrichEndTimestamp").text(domainIndicatorsData[indicator].enrichEndTimestamp);
                                    jQuery("#indicatorText").text(domainIndicatorsData[indicator].indicatorText); 
                                    $("#indicatorLink").attr("href", "/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
                                }
                        }
                }
            else if(indicatorType == 'Hash Code')
                {
                    for(var indicator in hashCodeIndicatorsData )
                        {
                            if(hashCodeIndicatorsData[indicator].sysId == indicatorSysId)
                                {
                                    jQuery("#indicatorId").text(hashCodeIndicatorsData[indicator].indicatorId);
                                    jQuery("#indicatorStatus").text(hashCodeIndicatorsData[indicator].indicatorStatus);
                                    jQuery("#indicatorType").text(hashCodeIndicatorsData[indicator].indicatorType);
                                    jQuery("#urgencyRanking").text(hashCodeIndicatorsData[indicator].urgencyRanking);
                                    jQuery("#completedEnrichCount").text(hashCodeIndicatorsData[indicator].completedEnrichCount);
                                    jQuery("#enrichStartTimestamp").text(hashCodeIndicatorsData[indicator].enrichStartTimestamp);
                                    jQuery("#enrichEndTimestamp").text(hashCodeIndicatorsData[indicator].enrichEndTimestamp);
                                    jQuery("#indicatorText").text(hashCodeIndicatorsData[indicator].indicatorText); 
                                    $("#indicatorLink").attr("href", "haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
                                }
                        }

                }


        };
    }]);

})();

Answer 1

这是因为即使在路由更改后，模式背景仍然存在于HTML中。您可以在路线更改中删除以下背景。

$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

如果需要，也可以添加$('div.modal-dialog').remove();

我不确定这是否是解决这个问题的正确方法;但它有效：）

Answer 2

$（＆＃39;主体＆＃39）。removeClass（＆＃39;模态开＆＃39）。端（）$（＆＃39; .modal-背景＆＃39）。除去（）;

单击超链接

2 个答案: