标签: modal-dialog

可能的重复：
如何知道表单是否显示为对话框

我有一个可以作为对话框或常规窗口打开的 winform。当它作为常规窗口打开时，我想隐藏确定取消按钮，有没有办法检查 winform 是否作为对话框打开？

我有一个HTML表单,单击该按钮将生成一个模态窗口.按钮如下.

<button type="button" class="btn" id="gs_one" data-toggle="modal" data-target="#BASIC">Get Started</button>

启动的模态类型将是"基本"类型.Modal实际上是另一种形式,然后通过POST方法提交给另一个PHP页面.模态如下.

<div class="modal fade" id="BASIC" role="dialog">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Header</h4>
         </div>
         <div class="modal-body">
            <form class="contact-work-form2 mar" id="contact-form" action="" method="post">
               <div class="text-input">
                  <div class="float-input">
                     <input type="text" placeholder="Name" id="name2" name="name" required>
                  </div>
                  <div class="float-input2">
                     <input type="text" placeholder="Email" id="mail2" name="mail" required>
                  </div>
               </div>
               <div class="text-input">
                  <div class="float-input">
                     <input type="text" placeholder="Phone" id="phone" name="phone" required>
                  </div>
                  <div class="float-input2">
                     <input type="text" placeholder="Company" id="company" name="company" required>
                  </div>
               </div>
               <div class="text-input"> …

我有一个注册模式，可以在单击时打开。输入是使用required等在视图上验证的。此外，还有其他字段（也在其他模式中，我没有提到），在这些字段中我再次验证了控制器中的规则。

我读过一种验证模态的好方法是使用AJAX。我很难过。

这是我的注册模式的简化版本，无需使用javascript或其他语言即可提交：

<div id="RegisterModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
 aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
            <h4 class="modal-title" id="myModalLabel">Register</h4>
        </div>

        <form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
            {!! csrf_field() !!}

            <div class="modal-body">

                <div class="form-group{{ $errors->has('first_name') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">First name</label>

                    <div class="col-md-6">
                        <input type="text" class="form-control" name="first_name"
                               value="{{ old('first_name') }}">
                    </div>
                </div>

                <div class="form-group{{ $errors->has('last_name') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">Last name</label>

                    <div class="col-md-6"> …

我有这个示例代码http://codepen.io/anon/pen/yaZopZ(下面的相关片段),当您单击按钮时,模态元素应该通过在屏幕中心打开并从它的全尺寸没什么.但是,它会在动画开头的右下方打开,然后在屏幕中央结束.我需要更改为该代码以使其按预期工作？

当您单击图像时,它应该与http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_image中的动画类似.但与该示例不同,我的示例在您在后台单击并需要保留该功能时关闭模式.

这是动画的一部分

@keyframes animatezoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

这就是动画

.modal {
  display: block;
  width: 600px;
  max-width: 100%;
  height: 400px;
  max-height: 100%;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
  animation: animatezoom 0.3s;
}

如果问题不在这里,其余的代码在我上面发布的codepen中(http://codepen.io/anon/pen/yaZopZ).

我正在使用Material Design的md-dialog,我遇到了一个小问题,这给我带来了很多麻烦.

我正在使用此对话框作为在db中创建新记录的表单,我需要从外部文件加载其控制器.原因是我在应用程序的许多地方(在许多其他控制器中)使用相同的对话框,我不想复制并粘贴到它们中的每一个.

我试图把它写成一个服务,但问题是,因为我将数据从表单绑定到控制器我使用$ scope,这样我就得到了"$ scope未定义".当我在该服务中添加$ scope作为依赖项时,我会注入错误.你有任何想法如何从外部加载模态控制器,所以它甚至可以使用$ scope吗？

$scope.showNewContactDialog = function($event) {
            var parentEl = angular.element(document.body);
                $mdDialog.show({
                parent: parentEl,
                targetEvent: $event,
                templateUrl: 'app/Pages/directory/contacts/newContact.dialog.html',
                controller: NewCompanyContactDialogCtrl,
                clickOutsideToClose: true,
                hasBackdrop: true
            });  
        };

// New User dialog controller
        function NewCompanyContactDialogCtrl($scope, $mdDialog) {
            var self = this;
            $scope.modalIcon = "add";
            $scope.modalTitle = 'Nová položka';
            $scope.modalAdvanced = true;

            // Country Selector
            apiCalls.getData(countryUrl, function(response){
                $scope.countries = response;
            })

            // Add New Object
            $scope.newItem = function() {
                var url = baseUrl + 'new/';
                var data = …

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

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

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

我想减少bootstrap 4模态默认的height和width。为此，我编写了以下代码：

<div class="modal-header" style="background-color: darkblue;color:#fff;height:5%;!important">
  <p class="mx-auto d-block">Please Give Your Finger</p>  
</div>

我已将模式标题的高度设置为5％。但高度与默认值相同。如何降低引导程序模态头的高度？

我正在开发一个使用Leaflet.js创建地图的Web应用程序,使用Vue.js来管理应用程序,使用Bulma for CSS.

Bulma有一个"模态"元素,当它的类设置为时,它应该出现在其他所有元素的前面is-active.我有这个工作,除了地图不会像页面的其余部分一样淡入背景.

我对模态知之甚少.有没有人知道为什么地图会在其他一切消失的情况下仍然可见？谢谢!!

我已经在codeigniter框架上编写了代码，用于批准和拒绝员工请假。之前的批准和不批准效果很好。但是，当我在同一脚本标记中编写了另一种方法来显示员工的请假详细信息后，批准和不批准就停止了工作。为了使两个按钮正常工作，我可以更改什么。这两个按钮也在模态中。

javascript

    <script> 

    $(function(){

    var BASE_URL = "http://localhost/employeemgt/index.php/";


        $('#pedingLeaveRequest').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var current_leave_id = button.data('id');
            var modal = $(this);

            modal.find('input[name="current_leave_id"]').val(current_leave_id); 
        });     



        //approve button
        $('#approvebtn').click(function(){              
            var id = $('input[name="current_leave_id"]').val();
            $.post(BASE_URL +  'admin/AdminDashboardController/approveLeave', 

                {'id': id}, 
                function(result){
                    console.log(result);
                if(result.error){                       
                    alert('try again');
                }else{
                    alert('Leave has been approved!');
                }
            });              
        });



       //disapprove button
        $('#declinebtn').click(function(){              
            var id = $('input[name="current_leave_id"]').val();
            $.post(BASE_URL +  'admin/AdminDashboardController/disapproveLeave', 

                {'id': id}, 
                function(result){
                    console.log(result);
                if(result.error){                       
                    alert('try again');
                }else{
                    alert('Leave has been disapproved!');
                }
            });              
        });

    });

    //show leave details on …

我有一个简单的登录表单，该表单允许用户执行一些其他操作。所有这些都在浏览器中打开一个“模式”窗口。只要登录表单的内容不超出屏幕范围，那么一切都很好。当它打开并且用户向下滚动时，模式部分仅覆盖浏览器的大小，因此该表单的其余部分将不被覆盖。这使他们可以打开第二个模态块。

我的模式块的CSS是：

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  padding: 16px;
}

我的不透明覆盖的CSS是：

.modalpwd {
  display: none; /* Hidden by default */
  z-index: 1; /* Sit on top */
  overflow: visible;
  align-self: center;  
  position: absolute;
  left: 0;
  top: 0; 
  margin-left: 0;
  margin-top: 0;
  width: 100%; /* Full width */ …