创建一个响应迅速且可以 post 到数据库的自定义弹出窗口

Question

我目前正在为我的公司开发一个使用 Laravel 框架在 PHP 中编写的内部网解决方案，这需要我做很多我以前从未做过的新事情，其中 1这些正在创建一个具有动态 html 的弹出窗口，具体取决于如下所示的下拉列表：

我有日历 (http://fullcalendar.io/) 当我单击此日历中的一天时，弹出窗口应显示如下所示：

从该下拉列表中选择一个值后，应根据所选值显示一组不同的字段，例如：要么所以我真的需要对弹出窗口进行大量控制，我以前没有使用弹出窗口的经验（除非 javascript 中的变量的简单警报很重要）而且我需要全部功能，它还需要能够 post 到数据库，所以我认为它甚至可能必须是一个表单元素。我还需要能够从我日历中的字段中的 onclick 事件中触发弹出窗口，这样对于到目前为止一直在编写后端代码的人来说，这就变得格外困难。

那么你的问题是什么？谁能告诉我实现此目标的 easiest/fastest 方法是什么而不丢失任何功能必需品，我可以从 php 执行此操作吗，Laravel 框架中是否存在这样的功能？（如果我找不到它）还是我必须开始使用 jquery 之类的东西？

我发现了很多库，比如 Fancybox，它们声称能够做到这一点，但我无法从它们的使用指南中找到头尾。

对于所有认为这不属于这里的人：我唯一的问题不是 "Is it Possible?" 我也在问我该怎么做，我在 html 中写了什么，javascript, php 让它工作？

编辑：我刚刚阅读了一些关于 jquery 对话框的内容，看起来很有趣，似乎您可以使用 jquery 对话框从 html 中的表单创建弹出窗口（表单是隐藏的）但我似乎无法让代码触发弹出窗口（对话框）到目前为止我有这个：

$(document).ready(function() {
    $('#calendar').fullCalendar({        
        //calendar options here        
        dayClick: function(date, jsEvent, view) {
            //to get date use date.format());
            //POPUPCODE START
            $("#logform").dialog({                                                            //Shows dialog
                height: 250,
                width: 450,
                modal: true,
                buttons: {
                    "Cancel": function() {
                        $( this ).dialog( "close" );
                    },
                    "Save": function() {
                        $.ajax({
                            url: "/url/to/submit",                   //
                            timeout: 30000,
                            type: "POST",
                            data: $('#modalform').serialize(),
                            dataType: 'json',
                            error: function(XMLHttpRequest, textStatus, errorThrown)  {
                                alert("An error has occurred making the request: " + errorThrown)
                            },
                            success: function(data){                                                        
                                 //Do stuff here on success such as modal info      
                                     $( this ).dialog( "close" );
                            }
                        }
                    } 
                }
            }),    
            //POPUPCODE END
            var myCalendar = $('#calendar'); 
            myCalendar.fullCalendar();
            var myEvent = {
                title:"Work 7.6h",
                allDay: true,
                start: date,
                end: date
            };

            myCalendar.fullCalendar( 'renderEvent', myEvent,true );

        },
        eventClick: function(calEvent, jsEvent, view) {
            var myCalendar = $('#calendar'); 
            myCalendar.fullCalendar('removeEvents',calEvent._id);

        }    
    })

});

对于我的 html 我有：

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Calendar</div>

                <div class="panel-body">
                    <div id='calendar'></div>
                                        <a class='iframe' href='home.blade.php'>Click me</a>
                </div>
                                <form id="logform" style="display:none">
                                    <input type="text" name="something">
                                    <input type="text" name="somethingelse">
                                </form>
            </div>
        </div>
    </div>
</div>

只有在 //popupcode start 和 //popupcode end 之间添加代码后问题才开始，现在我的日历甚至不会显示，我得到

SyntaxError: missing ) after argument list

它指向的地方是我上面的第三行 //popupcode end here:

}
                        }
                    }   //this one
                }
            }),    
            //POPUPCODE END

但无论我在那里添加或删除什么，我都会收到相同的错误

Answer 1

好的，首先，我推荐使用Javascript。

只有 PHP、HTML 和 CSS 才有可能，但您必须一直刷新页面才能显示下一个弹出窗口。

您可以只制作固定或绝对定位的 div，它们将覆盖底层内容。覆盖 div(popup) 将是一个普通的 div，您可以在其中制作表格和任何您想要的东西。这是我扔在一起的一个快速 jsfiddle： http://jsfiddle.net/0zvqm5nr/17/

代码如下：

HTML

 <div class="calendar">
    <h1>Your calendar would be here</h1>
    <button id="popupButton">13.05.2015</button>
</div>
<div class="popup">
    <h2>13.05.2015</h2>
    Activity: 
    <form action="site.php" method="post">
        <select id="activity">
            <option class="placeholder" selected disabled>Select</option>
            <option>work</option>
            <option>youth leave</option>
        </select>
    </form> 
</div>
<div class="popup">
    <h3>Work 13.05.2015</h3>
    this will be the work popup
</div>
<div class="popup">
    <h3>Youth leave 13.05.2015</h3>
    this will be the youth leave popup
</div>

CSS

.calendar {
    width: 500px;
    height: 500px;
    background: green;
}
.popup {
    width: 500px;
    height: 500px;
    background: grey;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
}

Javascript

document.getElementById("popupButton").onclick = function() {
    document.getElementsByClassName("popup")[0].style.display = "block"    
}
document.getElementById("activity").onchange = function() {
    document.getElementsByClassName("popup")[0].style.display = "none" 
   var selectedValue = this.options[this.selectedIndex].innerHTML;
    if (selectedValue == "work") {
        document.getElementsByClassName("popup")[1].style.display = "block";       
    }
    if (selectedValue == "youth leave") {
         document.getElementsByClassName("popup")[2].style.display = "block";       
    }
}

希望对您有所帮助。

Answer 2

我自己弄明白了，我没有通过学习各种新事物来让事情变得更难，而是通过删除我之前添加的所有代码并添加 1 行代码来创建弹出窗口来使用 jquery.

我删除了用于创建弹出窗口的所有代码并将其替换为：$("#somediv").load().dialog({modal:true});

我围绕我的表单创建了一个名为 'somediv' 的 div，现在它正在做我需要它做的事情，看到我的整个表单现在都在弹出窗口中，我很确定我可以添加一个可以提交表单的按钮，这样我就可以用 php 捕获它，然后我就可以用 php 中的数据做任何我想做的事情（post 到数据库或 return 错误消息等...)

创建一个响应迅速且可以 post 到数据库的自定义弹出窗口

Create a custom popup that is responsive and can post to database

html

javascript

php

popup

laravel