Question

我需要为预览按钮添加弹出窗口。当用户单击预览按钮时，应显示表单的验证以及带有详细信息的弹出窗口。如果该字段为空白，则应显示requird字段，然后一旦用户输入弹出的所有详细信息以进行显示。在我的代码中，当用户单击预览按钮时，popup和required都会一起工作。

这是代码。

  <form method="post" align="center" action="">
                                <div class="login">
                                    <div class="login-form">
                                        <h3>Title:</h3>
                                        <input type="text" name="title" required="required" /><br />
                                        <h3>Image:</h3>
                                        <input type="text" name="image"  required="required"/>
                                        <br />
                                        <h3>Date:</h3>
                                        <input type="text" id="filter-date" name="date"  required="required"/>
                                        <br />
                                        <h3>Description:</h3> 
                                        <textarea rows="2" cols="40" name="description" type="text"  required="required">
                                        </textarea>
                                        <br />

                                        <button id="myBtn">Open Modal</button>


                                    </div>
                                </div>

                            </form>
                            <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>

    </div>
    <script>
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    </script>

                    </div>
                    </div>
                    </body>
                </html>

Answer 1

$(function() {
        //----- OPEN
        $('[data-popup-open]').on('click', function(e)  {

            if ($('input:text[name="title"]').val().length == 0 || $('input:text[name="image"]').val().length == 0 || $('input:text[name="date"]').val().length == 0 || !$.trim($("textarea").val())) {
               alert('Fill all the fields');
               return false;
            }else {
                var targeted_popup_class = jQuery(this).attr('data-popup-open');
                $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

                e.preventDefault();
            }
        });

        //----- CLOSE
        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

            e.preventDefault();
        });
    });

   /* Outer */
        .popup {
            width:100%;
            height:100%;
            display:none;
            position:fixed;
            top:0px;
            left:0px;
            background:rgba(0,0,0,0.75);
        }

        /* Inner */
        .popup-inner {
            max-width:700px;
            width:90%;
            padding:40px;
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
            box-shadow:0px 2px 6px rgba(0,0,0,1);
            border-radius:3px;
            background:#fff;
        }

        /* Close Button */
        .popup-close {
            width:30px;
            height:30px;
            padding-top:4px;
            display:inline-block;
            position:absolute;
            top:0px;
            right:0px;
            transition:ease 0.25s all;
            -webkit-transform:translate(50%, -50%);
            transform:translate(50%, -50%);
            border-radius:1000px;
            background:rgba(0,0,0,0.8);
            font-family:Arial, Sans-Serif;
            font-size:20px;
            text-align:center;
            line-height:100%;
            color:#fff;
        }

        .popup-close:hover {
            -webkit-transform:translate(50%, -50%) rotate(180deg);
            transform:translate(50%, -50%) rotate(180deg);
            background:rgba(0,0,0,1);
            text-decoration:none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" align="center" action="">
    <div class="login">
        <div class="login-form">
            <h3>Title:</h3>
            <input type="text" name="title" required="required" /><br />
            <h3>Image:</h3>
            <input type="text" name="image"  required="required"/>
            <br />
            <h3>Date:</h3>
            <input type="text" id="filter-date" name="date"  required="required"/>
            <br />
            <h3>Description:</h3>
            <textarea rows="2" cols="40" name="description"  required="required">
                                        </textarea>
            <br />

            <a class="btn" data-popup-open="popup-1" href="#">  <button id="myBtn">Open Modal</button></a>


        </div>
    </div>

</form>


<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <div class="modal-content">
            <p>Some text in the Modal..</p>
        </div>
        <p><a data-popup-close="popup-1" href="#">Close</a></p>
        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
</div>

    $(function() {
        //----- OPEN
        $('[data-popup-open]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-open');
            $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

            e.preventDefault();
        });

        //----- CLOSE
        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

            e.preventDefault();
        });
    });

 /* Outer */
        .popup {
            width:100%;
            height:100%;
            display:none;
            position:fixed;
            top:0px;
            left:0px;
            background:rgba(0,0,0,0.75);
        }

        /* Inner */
        .popup-inner {
            max-width:700px;
            width:90%;
            padding:40px;
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
            box-shadow:0px 2px 6px rgba(0,0,0,1);
            border-radius:3px;
            background:#fff;
        }

        /* Close Button */
        .popup-close {
            width:30px;
            height:30px;
            padding-top:4px;
            display:inline-block;
            position:absolute;
            top:0px;
            right:0px;
            transition:ease 0.25s all;
            -webkit-transform:translate(50%, -50%);
            transform:translate(50%, -50%);
            border-radius:1000px;
            background:rgba(0,0,0,0.8);
            font-family:Arial, Sans-Serif;
            font-size:20px;
            text-align:center;
            line-height:100%;
            color:#fff;
        }

        .popup-close:hover {
            -webkit-transform:translate(50%, -50%) rotate(180deg);
            transform:translate(50%, -50%) rotate(180deg);
            background:rgba(0,0,0,1);
            text-decoration:none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" align="center" action="">
    <div class="login">
        <div class="login-form">
            <h3>Title:</h3>
            <input type="text" name="title" required="required" /><br />
            <h3>Image:</h3>
            <input type="text" name="image"  required="required"/>
            <br />
            <h3>Date:</h3>
            <input type="text" id="filter-date" name="date"  required="required"/>
            <br />
            <h3>Description:</h3>
            <textarea rows="2" cols="40" name="description" type="text"  required="required">
                                        </textarea>
            <br />

            <a class="btn" data-popup-open="popup-1" href="#">  <button id="myBtn">Open Modal</button></a>


        </div>
    </div>

</form>


<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <div class="modal-content">
            <p>Some text in the Modal..</p>
        </div>
        <p><a data-popup-close="popup-1" href="#">Close</a></p>
        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
</div>

Answer 2

＆＃13;

 $(function() {
        //----- OPEN
        $('[data-popup-open]').on('click', function(e)  {

            if ($('input:text[name="title"]').val().length == 0 || $('input:text[name="image"]').val().length == 0 || $('input:text[name="date"]').val().length == 0 || !$.trim($("textarea").val())) {
               alert('Fill all the fields');
               return false;
            }else {
                var targeted_popup_class = jQuery(this).attr('data-popup-open');
                $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

                e.preventDefault();
            }
        });

        //----- CLOSE
        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

            e.preventDefault();
        });
    });

＆＃13;

  /* Outer */
        .popup {
            width:100%;
            height:100%;
            display:none;
            position:fixed;
            top:0px;
            left:0px;
            background:rgba(0,0,0,0.75);
        }

        /* Inner */
        .popup-inner {
            max-width:700px;
            width:90%;
            padding:40px;
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
            box-shadow:0px 2px 6px rgba(0,0,0,1);
            border-radius:3px;
            background:#fff;
        }

        /* Close Button */
        .popup-close {
            width:30px;
            height:30px;
            padding-top:4px;
            display:inline-block;
            position:absolute;
            top:0px;
            right:0px;
            transition:ease 0.25s all;
            -webkit-transform:translate(50%, -50%);
            transform:translate(50%, -50%);
            border-radius:1000px;
            background:rgba(0,0,0,0.8);
            font-family:Arial, Sans-Serif;
            font-size:20px;
            text-align:center;
            line-height:100%;
            color:#fff;
        }

        .popup-close:hover {
            -webkit-transform:translate(50%, -50%) rotate(180deg);
            transform:translate(50%, -50%) rotate(180deg);
            background:rgba(0,0,0,1);
            text-decoration:none;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" align="center" action="">
    <div class="login">
        <div class="login-form">
            <h3>Title:</h3>
            <input type="text" name="title" required="required" /><br />
            <h3>Image:</h3>
            <input type="text" name="image"  required="required"/>
            <br />
            <h3>Date:</h3>
            <input type="text" id="filter-date" name="date"  required="required"/>
            <br />
            <h3>Description:</h3>
            <textarea rows="2" cols="40" name="description"  required="required">
                                        </textarea>
            <br />

            <a class="btn" data-popup-open="popup-1" href="#">  <button id="myBtn">Open Modal</button></a>


        </div>
    </div>

</form>


<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <div class="modal-content">
            <p>Some text in the Modal..</p>
        </div>
        <p><a data-popup-close="popup-1" href="#">Close</a></p>
        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
</div>

＆＃13;

Answer 3

将id添加到表单 myFrm 这是ajax代码::

您必须提及您编写相应验证码的相应文件的URL ...

<script>
    jQuery('#myBtn').click(function(){
        var data = jQuery('form#myFrm').serialize();
        jQuery.ajax(function(){
            data: data,
            url: '<url path to php file>',
            method: 'post',
            success: function(res){
                jQuery('.modal-content-inner').html(res);
            }
        });
    });
</script>

<!-- Updated Your Modal content -->
<div class="modal-content">
    <span class="close">&times;</span>
    <div class="modal-content-inner"></div>
</div>

Answer 4

＆＃13;

$(document).ready(function(){
  var $title = $('#title')
  var $image = $('#image')
  var $filterDate = $('#filterDate')
  var $description = $('#description')
  
  $('#myForm').validate({
  submitHandler: function(form) {
    // some other code
    // maybe disabling submit button
    // then:
   // $(form).submit();
   $('.title').text($title.val())
   $('.image').text($image.val())
   $('.filterDate').text($filterDate.val())
   $('.description').text($description.val())
   $( ".modalDialog" ).dialog();
  }
  });
  
  
})

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<form method="post" align="center" id="myForm">
                                <div class="login">
                                    <div class="login-form">
                                        <h3>Title:</h3>
                                        <input type="text" name="title" id="title" required/><br />
                                        <h3>Image:</h3>
                                        <input type="text" name="image" id="image"  required/>
                                        <br />
                                        <h3>Date:</h3>
                                        <input type="text" id="filterDate" name="date"  required/>
                                        <br />
                                        <h3>Description:</h3> 
                                        <textarea rows="2" cols="40" name="description" id="description" required>
                                        </textarea>
                                        <br />

                                        <button type="submit" id="myBtn">Open Modal</button>



                                    </div>
                                </div>

                            </form>
                            
<div class="modalDialog" title="Preview" style="display:none;">
  <p>Title : <span class="title"></span></p>
  <p>Image :<span class="image"></span></p>
  <p>Date : <span class="filterDate"></span></p>
  <p>description : <span class="description"></span></p>
  
</div>

＆＃13;

使用带验证的php在弹出窗口中预览表单详细信息

4 个答案: