Hi Readers,

If you are using Bootstrap in your application you should use modal to show popups in your web application. Modal is a very nice feature provided by the Bootstrap to show nice and beautiful popups which can be easily modifiable. I recently used them in my recent project.

I had a form in my modal which need to be filled by the end user. I had implemented both client and server side validation on it. If there is any error from the client side it is shown immediately but if the error is from the server side I had a problem showing it. The reason behind it was that on successful submit of the form the webpage use to get reloaded and the modal close out.

So, to open modal(popup) automatically we check for any error from the server side validation and thus open modal if found any. To make if possible you can use the following jQuery code.

Syntax:-

<div class="clearfix error2 col-md-12" id="errorMessageEmailShareModal">
    @if (count($errors-&gt;emailShare) &gt; 0)
    <script type="text/javascript">
        $(window).load(function() {
            $('#emailShare').modal('show');
        });
    </script>
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
            @foreach ($errors-&gt;emailShare-&gt;all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
</div>

HTML Syntax:-

<div class="modal fade" id="emailShare" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    .....
    ....
    ..
    .
</div>