it-roy-ru.com

Как включить и выключить оповещение о загрузке с помощью нажатия кнопки?

Я хочу, чтобы окно предупреждений отображалось несколько раз с событием нажатия кнопки без обновления страницы, но окно предупреждения отображается только один раз. Если я хочу снова показать окно предупреждения, я должен обновить страницу. 

В настоящее время, если вы выводите предупреждение о загрузке на страницу, когда вы закрываете его, контейнер div для предупреждения исчезает со страницы. Поэтому, когда вы снова нажимаете кнопку, она больше не отображается. Я делал следующее на кнопке закрытия, чтобы скрыть ее вместо удаления контейнера предупреждений.

<button class="close" onclick="$('#alertBox').hide();; return false;">×</button>

Интересно, может ли использование data-toggle или data-dismiss в начальной загрузке заставить этот эффект переключения работать без использования моих собственных пользовательских обработчиков Javascript. 

34
ttback

У меня была та же проблема: просто не используйте data-dismiss от кнопки закрытия и работайте с JQuery show() и hide():

$('.close').click(function() {
   $('.alert').hide();
})

Теперь вы можете показать предупреждение при нажатии на кнопку, используя код:

$('.alert').show()

Надеюсь это поможет!

48
Ron

На самом деле вы должны рассмотреть возможность использования что-то вроде этого:

$('#the-thing-that-opens-your-alert').click(function () {
  $('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
});

$('.close').click(function () {
  $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});

Поскольку при загрузке Fade/In используется CSS3 вместо Jquery hide/show в полном Javascript . Я хочу сказать, что на мобильных устройствах CSS3 работает быстрее, чем Js.

И ваш HTML должен выглядеть так:

<a id="the-thing-that-opens-your-alert" href="#">Open my alert</a>

<div id="le-alert" class="alert alert-warn alert-block fade">
  <button href="#" type="button" class="close">&times;</button>
  <h4>Alert title</h4>
  <p>Roses are red, violets are blue...</p>
</div>

И это очень круто! Проверьте это в jsFiddle =)

36
Leiko

Я просто использовал переменную модели, чтобы показать/скрыть диалог и удалил data-dismiss = "alert"

например

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria- hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

работает для меня и останавливает необходимость выходить на JQuery

3
user1661621

Вам не нужно использовать jquery для этого, вот решение только для начальной загрузки.

Кнопка включения/выключения:

<button type="button" class="btn" data-toggle="collapse" href="#my-alert-box">
   <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</button>

Предупреждение с кнопкой закрытия, которая скрывает предупреждение (аналогично нажатию кнопки показать/скрыть):

<div id="my-alert-box" class="alert alert-info collapse" role="alert">
   <button type="button" class="close" data-toggle="collapse" href="#my-alert-box">
      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
   </button>
   <p>Look, here's a show/hide alert box without jquery...</p>
</div>
2
Bjorn

Вы можете добавить класс .hidden к своему предупреждению и затем включить его. Смотрите: JSFiddle

HTML

<a id="show-my-alert" href="#">Show Alert</a>

<div id="my-alert" class="alert alert-warning hidden" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">    
        <span aria-hidden="true">&times;</span>
    </button> 
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

JavaScript

$("#show-my-alert, .close").click(function() {
    $("#my-alert").toggleClass("hidden");
});
1
Alex

$(document).on('click', '.close', function() {

   $('.alert').hide();

});

это доступно для всех элементов, включая новый элемент

0
Bestafiko Borizqy

Чтобы показать/скрыть, вы можете сделать это, как в принятом ответе:

У меня была та же проблема: просто не используйте data-dismiss от кнопки закрытия и работайте с JQuery show() и hide():

$('.close').click(function() {
$('.alert').hide();
  })

Теперь вы можете показать предупреждение при нажатии на кнопку, используя код:

$('.alert').show()

Надеюсь это поможет!

Или то, что пытался сделать, - это создать связываемое предупреждение, которое свернуло бы предупреждение и по-прежнему показывало заголовок, например. я сделал это, чтобы я мог сделать это position:fixed; и затем показать другой контент. Однако это было трудно сделать, поэтому я создал обходной путь. Когда вы нажимаете кнопку отклонения, он устанавливает всплывающее display:none;, а затем сначала, когда оно вверху, вам может потребоваться предотвратить первоначальное закрытие содержимого, поэтому я добавил разрывы строк, которые будут отображаться/скрываться в соответствии с отображением оповещения. поэтому 2 предупреждают, что один, когда вы щелкаете по кнопке dismiss, display:none;, а затем показывает другое всплывающее окно, содержащее только одну строку контента. при щелчке по этому всплывающему окну для основного оповещения устанавливается display:block;, а также разрывы строк при наведении. Вот код, теперь, когда объяснение сделано:

function ShowALERT() { 
  document.getElementById('ALERT').style.display = "block";
	document.getElementById('ShowALERT').style.display = "none";
	document.getElementById('breakShowALERT').style.display = "none";
	document.getElementById('breakALERT').style.display = "block";
	
}
function closeALERT() { 
   document.getElementById('ALERT').style.display = "none";
document.getElementById('breakShowALERT').style.display = "block";
  document.getElementById('ShowALERT').style.display = "block";
document.getElementById('breakALERT').style.display = "none";
	
}
#ALERT {
	position:fixed;
	display:block;
	width:100%;
	z-index:1;
	left:0px;
	top:0px;
	
	}
  #ShowALERT {
position: fixed;
display:none;
z-index:1;
top:0px;
left:0px;
width: 100%;
}
#breakShowALERT {
display:none;
}
	#breakALERT {
display:block;
}
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <button id="ShowALERT"  onclick="ShowALERT()" class="bg-primary"> 

	  <h5> <b>Important Alert</b></h5>
</button>
</div>
<div class=container>
   <div id="ALERT" class="alert bg-primary alert-dismissable">
 <a href="#" class="close" onclick="closeALERT()" aria-label="close">Dismiss</a>
 <h5><b>Note:</b> Alert Content here......................</h5>
</div>
 </div>
 <body>
 <div id='breakALERT'><br><br><br><br><br></div>
					<div id='breakShowALERT'><br><br></div>
 <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
 </body>

0
user8803833

Я использовал следующий рабочий подход, основанный на решении Лейко. 

$(document).ready(function(){
    $("#btnFV").click(function()
    {
        $("#alertFV").addClass("in");
    });

    $("#alertFV").on("close.bs.alert", function ()
    {
        $("#alertFV").removeClass("in");
        return false;
    });
});

Тело HTML содержит ниже оповещения

<button id="btnFV" class="form-control">Button To Show/Hide Alert</button>

<div id="alertFV"  class="alert alert-danger alert-dismissable fade show">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
      </button>
      <strong>Danger!</strong> 
    </div>
0
jsa

Вы также можете попробовать это:

$("#MyBtn").click(function() {

    if($("#MyAlrt").is(":visible")){
        $("#MyAlrt").hide();
    }else{
        $("#MyAlrt").show();
    }

});

Это сработало очень хорошо для меня.

0
user1321759