标签: bootstrap-modal

我正在使用引导模式窗口中包含的 html5 音频。关闭模式时，如果音频尚未完成，音频将继续播放。如何在关闭模态窗口时停止播放音频？

谢谢

我正在设置 cookie 以在页面加载时启动模态。目前，模态只发生一次。

我需要它每个月重置一次，以便每个访问者每个月都会弹出一次。

是否可以修改我的代码来实现这一点，还是我需要以另一种方式做到这一点？任何帮助表示赞赏。

$(document).ready(function () {
//if cookie hasn't been set...
if (document.cookie.indexOf("ModalShown=true")<0) {
    $("#newsletterModal").modal("show");
    //Modal has been shown, now set a cookie so it never comes back
    $("#newsletterModalClose").click(function () {
        $("#newsletterModal").modal("hide");
    });
    document.cookie = "ModalShown=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
}

});

我的网页中有一个使用 Bootstrap 的模态。我在其中添加了锚标记，其中有 href 链接。当我尝试单击该锚元素时，它不可单击。锚标记在模态中不起作用。

请帮我解决这个问题。

请找到下面的代码 -

<div class="portfolio-modal modal fade" id="editionsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="col-sm-3">
                        <a href="hingoli.html" data-target="#" style="text-decoration: none;">
                            <div style="padding:15px; color:#181818; text-align: center; ">
                                <h4>Hingoli</h4>
                            </div>
                            <img src="pages/hingoli/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
                        </a>

                    </div>
                    <div class="col-sm-3">
                        <a href="parbhani.html" class="portfolio-link" style="text-decoration: none;">
                            <div style="padding:15px; color:#181818; text-align: center; ">
                                <h4>Parbhani</h4>
                            </div>
                            <img src="pages/parbhani/1.jpg" style="margin: 0 …

我正在研究 arshaw 日历，我对此很陌生。我希望能够通过模态窗口添加事件。以下是我正在尝试执行的操作的屏幕截图：

在上图中，是我的（Arshaw）Fullcalendar。

第二张图片显示，当用户点击日历时，比如早上 6 点，模态弹出，用户现在可以通过模态添加事件。

这是我的代码：

Javascript：

//arshaw calendars
$(document).ready(function () {
    // page is now ready, initialize the calendar...

         $('#calendar').fullCalendar({
            // put your options and callbacks here
            defaultView: 'agendaDay',
            eventBorderColor: "#de1f1f",

             header:
            {  
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

            editable: true,
            selectable: true,

            //When u select some space in the calendar do the following:
            select: function (start, end, allDay) {
                //do something when space selected
                //Show 'add event' modal
                $('#createEventModal').modal('show');
            },

            //When u drop an event …

你如何为模态的内容正确添加换行符？我有一个简单的字符串:

'Please check the Apple and/or \nOrange Folder checkbox to start program.'

我把"\n"换行符放在"橙色"之前,所以我希望模态有两行.但是,当显示模态时,所有内容都显示在一行上('\n'未显示,因此我确信打字稿正确地看到它并且不使其成为字符串的一部分).

我在模态中使用谷歌自动完成。当我单击输入字段时，它会在模态后面显示结果。我没有使用任何 css。它在模态之外完美地工作。但它在模态内不能正常工作。请帮我。

HTML代码

<div class="form-group">
    <p class="control-label1">City</p>
    <input type="text" id="locationTextField" placeholder="" name="city" class="form-control">
</div>

Javascript代码

//Google Map
function initialize() {
    var input = document.getElementById('locationTextField');
    var autocomplete = new google.maps.places.Autocomplete(input);
}

function validateCity() {
    searchfield = $('#locationTextField').val();
    if (searchfield == "" || searchfield == null) {
        return false;
    }
    else {
        $('#locationTextField').val('');
        return false;
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

我是 JS 新手，我正在尝试使用以下代码在同一页面上使用 2 个模态图像：

https://www.w3schools.com/howto/howto_css_modal_images.asp

使用此 HTML、JS 和 CSS 视图调整大小仅适用于一张图片，不确定如何使其适用于同一页面上的两张图片：

我有每个图像的第一个 html 代码两次：

HTML：

<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div> 

big-picture.css 中的 CSS：

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: …

我有一个页面，我想关闭一个bootstrap 3模态，然后从 DOM 中删除模态本身。

所以，我试图这样做：

let modal = $('#myModal');
modal.modal('hide');
modal.remove();

问题是这个解决方案关闭了模态弹出窗口本身，但在页面上留下了变暗的半透明背景。我怀疑这是因为在关闭动画完成之前模态被从页面中删除。

我知道我可以设置一个计时器等待一段时间并确保模式在从 DOM 中删除它之前已经关闭，但我想知道的是：是否有更“正确”的方式不依赖于任意计时器？

我有一个引导模式，我已将其设置为在页面加载时打开，效果非常好。

但是，如果您在模式之外单击，我会尝试禁用该功能。

它包含一个必需的表单，必须填写并提交该表单才能关闭模式，这是我正在使用提交按钮处理的事情，但我需要首先确保用户无法以任何其他方式关闭此模式无需填写表格并提交。

这是当前的代码：

<script type="text/javascript"> 
$(window).on('load',function(){
    $('#my_modal').modal('show');
    $("#my_modal").modal({
        backdrop: 'static',
        keyboard: false
    });

});
</script>

所以它在页面加载时打开没有问题，但如果我点击 x，或单击它的外部，它就会关闭，我不想完全禁用它。

我按以下顺序隐藏和显示模态：

当我点击导入按钮时，它将以模态为目标，id="import-actionpopup"然后我有另外两个按钮附加，并在我上传文件和选择选项时覆盖，然后这个import-actionpopup将被关闭，然后我有另外两个模态，id="warningOverrideAction"它们将在overrideButton上打开按钮单击和其他模态id="appendAction"将在appendButton单击时打开。

现在，当我隐藏我的 warningOverrideAction 或 appendAction 模式时，它会自动添加 padding-right:17px; 到我的身体。

当我在 stackoverflow 上搜索时，我发现这是bootstrap.css 中的一个小故障，但我的问题是即使在模态隐藏后填充仍然存在。

 $(document).ready(function(){

        $("#appendButton,#overrideButton").click(function(event){
            path=document.getElementById("zapper").value;
            if(path){       
             if($('#hinkSelect option:selected').prop('disabled') == true){
                   $('#reportError').modal('show');
                   document.getElementById('uploadError').innerHTML="<center>You have not selected any tool. <br>Make sure to select one tool.</center>";
                   document.getElementById('error_title').innerHTML="File Upload Error";
                  }
                  else{
                      toolName=document.getElementById('hinkSelect').value;
                      $('#import-actionpopup').modal('hide');
                      if(event.target.id==='overrideButton')
                      $('#warningOverrideAction').modal('show');
                      else if(event.target.id==='appendButton')
                      $('#appendAction').modal('show');
                      document.getElementById('hinkSelect').value='';
                  }
            }
            else{
                $('#reportError').modal('show');
                document.getElementById('uploadError').innerHTML="<center>You have not uploaded a zip file. <br>Make sure to upload …