Question

我有一个模态，我通过变量提供其内容信息。

enter code here
Param(
[string]$cname = (Read-Host "Computer Name?") ,
[string]$event = (Read-Host "What event?") ,
[string]$eventfilter = (Read-Host "What key word are you looking for?") '
[string]$amount = (Read-Host "How many events do you want to see?")
)
Invoke-Command -cn $cname -ScriptBlock {Get-EventLog -cn $cname -LogName $event -Message "*$eventfilter*" -Newest $amount | FT -Wrap}

我的问题是我对需要弹出的所有不同消息使用相同的模态。在页面加载时，我需要弹出需要弹出的消息，但只有一个显示，这是被调用的最后一个模态。有没有办法对呼叫进行排队，以便显示第一个模态，然后显示第二个模式？

<div id="myModal">
 <div id="outer">
  <div id="inner">
   <div id="top">Headline</div>
    <span><img class="btnClose bCancel" src="#"></span>
   <div class="modalCnt"></div>
    <div class="btn">
     <span class="btnText">OK</span>
    </div>
  </div> <!-- Inner -->
 </div> <!-- Outer -->
</div> <!-- Close myModal -->

Answer 1

请重新访问以下官方文档：

https://v4-alpha.getbootstrap.com/components/modal/#varying-modal-content

这是一个非常清晰和优雅的解决方案。

<script>
$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var header = button.data('header')
  var content = button.data('content')
  var modal = $(this)
  modal.find('.modal-title').text(header)
  modal.find('.modal-modalCnt').val(content)
})
</script>

触发模态时传递data-header =“your_header”data-content =“your_content”。

另外在标题中添加一个类别。希望我很清楚。

Answer 2

你正在做的是同时使用2个不同的模态数据调用相同的函数。因此，如果我们按功能流程进行，它将在最后一行完成执行。这就是为什么它显示最后一个模态，所以你可以做的是使用if - else条件，

if modal1 {
modalHead.html("<h3>Headline 1</h3>");
modalContent.html("<p>Content 1</p>");
modal.show();
}
else if modal 2 {
modalHead.html("<h3>Headline 2</h3>");
modalContent.html("<p>Content 2</p>");
modal.show();
}
else {
//default part
}

Answer 3

尝试：

function new_modal(head, content){

    var random = Math.floor(1000 + Math.random() * 9000);

    var modal_html = '<div id="myModal_'+ random +'">' +
     '<div id="outer">' +
      '<div id="inner">' +
       '<div id="top">'+head+'</div>' +
        '<span><img class="btnClose bCancel" src="#"></span>' +
       '<div class="modalCnt">'+content+'</div>' +
        '<div class="btn">' +
         '<span class="btnText">OK</span>' +
        '</div>' +
      '</div> <!-- Inner -->' +
     '</div> <!-- Outer -->' +
    '</div>';

    $('body').append(modal_html);

    return 'myModal_' + random;

}

$( document ).ready(function() {
    modal1 = new_modal("<h3>Headline 1</h3>", "<p>Content 1</p>");
    $('#' + modal1).show();
    modal2 = new_modal("<h3>Headline 2</h3>", "<p>Content 2</p>");
    $('#' + modal2).show();
});

希望它有助于

在页面加载时使用不同内容触发相同的模式

3 个答案: