Προς το περιεχόμενο

[Bootstrap Modal] Μετατροπή σε απλό div με relative position

philos

Από τον philos
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

philos Crazy Insomniac

philos

Δημοσ.
Δημοσ.

Έχω βρει μια παραλλαγή του jQuery File Upload, η οποία όμως χρησιμοποιεί modal για εμφάνιση του uploader (βγαίνει ως popup) κάνοντας click στο:

<a href="#" onclick="show_uploader();">Click to upload</a>

... με:

function show_uploader() {
     $('#uploadModal').modal('show');
}

Σας παραθέτω το αρχείο template.php. Θέλω τον uploader μέσα στη σελίδα και όχι σε popup. Απ' ότι είδα χρησιμοποιεί το modal σύστημα του bootstrap. Μπορεί κάποιος να με βοηθήσει να το μετατρέψω σε απλό div, τα περιεχόμενα του οποίου θα τοποθετήσω σε ένα πχ <div id="myuploader"></div> ώστε να φαίνεται κανονικά μέσα στη σελίδα και να σκρολλάρετε με αυτή;

Σκέφτομαι ότι θα μπορούσα να βάλω λίγο custom CSS στη σελίδα ώστε να "φτιάξει" αλλά δεν μου έρχεται κάτι.

 

Ευχαριστώ :-)

<input type="hidden" id="object_id" value="<?php echo $id; ?>">
<input type="hidden" id="user_id" value="<?php echo $user_id; ?>">
<input type="hidden" id="type_id" value="<?php echo $type_id; ?>">

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <li class="template-upload fade">
        <span class="preview"></span>
        {% if (file.error) { %}
           <span class="label label-danger">Error</span>
        {% } %}
        {% if (!o.files.error) { %}
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            	<div class="progress-bar progress-bar-success" style="width:0%;"></div>
            </div>
        {% } %}
    </li>
{% } %}
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <li class="template-download fade {% if (file.image) { %}image{% } %}" id="sort_{%=file.id%}" data-file="{%=file.name%}">
    	{% if (file.error) { %}
            <span class="label label-danger">Error</span>
        {% } %}
        {% if (!file.error) { %}
            <span class="preview" title="{%=file.title%}">
                {% if (file.image) { %}
            	   <a href="{%=file.url%}" title="{%=file.title%}" data-lightbox="gallery-{%=file.object_id%}"><img src="{%=file.thumbnailUrl%}" width="80" height="80"></a>
                {% } else { %}
                    <span class="filetype {%=file.filetype%}"></span>
                {% } %}
            </span>
            <div class="description">{%=file.description%}</div>            
            <div class="actions">
            	<i class="glyphicon glyphicon-edit edit-file" title="Edit"></i>
                {% if (file.image) { %}
                    <i class="glyphicon glyphicon-picture crop-image" data-url="{%=file.url%}" data-width="{%=file.width%}" data-height="{%=file.height%}" title="Crop Thumbnail"></i>
                {% } %}
                <i class="glyphicon glyphicon-trash delete-file" title="Delete"></i>
            </div>
        {% } %}
    </li>
{% } %}
</script>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Upload Files</h4>
            </div>
            <div class="modal-body">
                 <!-- Hidden alert message -->
                <div class="alert alert-danger upload-max">
                     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                     You have exceeded the limit of uploaded images.
                </div>
                 <div id="fileupload">   
                    <!-- Images list -->
                    <ul class="files images"></ul>
                    <br clear="all">
                   
                     <!-- Attachments list -->
                    <ul class="files attachments"></ul>
                     <br clear="all">

                    <div class="loading-files"></div>

                    <div class="fileupload-buttonbar">
                        <!-- Upload files button -->
                        <span class="btn btn-sm btn-success fileinput-button"><i class="glyphicon glyphicon-upload"></i> <span>Upload</span><input type="file" name="files[]" multiple></span>
                        <!-- Webcam snaphots -->
                        <span class="btn btn-sm btn-info webcam-snap"><i class="glyphicon glyphicon-camera"></i> <span>Webcam</span></span>
                        <!-- Delete all files button -->
                        <button type="button" class="btn btn-sm btn-danger delete-all"><i class="glyphicon glyphicon-trash"></i> <span>Delete all</span></button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <span class="loading"></span>
                <button type="button" class="btn btn btn-info" data-dismiss="modal">Done</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit file Modal -->
<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Edit Image</h4>
            </div>
            <div class="modal-body">
                
                <div class="form-group">
                    <label for="title">Title</label>
                    <input type="text" class="form-control" id="title">
                </div>
                 <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control" id="description"></textarea>
                </div>
                <input type="hidden" id="file_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary save">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Crop image Modal -->
<div class="modal fade" id="cropModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Crop Thumbnail</h4>
            </div>
            <div class="modal-body">
                <div id="crop"></div>
                <input type="hidden" id="x1">
                <input type="hidden" id="y1">
                <input type="hidden" id="w">
                <input type="hidden" id="h">
            </div>
            <div class="modal-footer">
                <span class="loading"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary save">Crop & Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Crop image Modal -->
<div class="modal fade" id="webcamModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Webcam Snaphost</h4>
            </div>
            <input type="hidden" id="webcam-image">
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <span class="loading"></span>
                <button type="button" class="btn btn-default cancel" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary capture" onclick="imgSelect.webcamSnap()">Capture</button>
                <button type="button" class="btn btn-info new" onclick="imgSelect.webcam();">New</button>
                <button type="button" class="btn btn-success save">Save</button>
            </div>
        </div>
    </div>
</div>

post-54881-0-40760800-1466884462_thumb.png

dominotrix Community Regular

dominotrix

Δημοσ.
Δημοσ.

Αν θελεις απλα την φορμα του popup μεσα στη σελιδα στατικα, γιατι απλα δεν βαζεις τον κωδικα του template.php μεσα στο σημειο που θελεις να εμφανιζεται;

philos Crazy Insomniac

philos

Δημοσ.
  • Μέλος
Δημοσ.

Λειτουργεί με κάποια αρχεία js και css καθώς και με PHP και MySQL και δεν ξέρω πως να το βάλω εκεί που λες.

Πάντως ανέβασα την HTML σελίδα εδώ (που έκανα save as.. ) και μπορείς να δεις πως ανοίγει το modal.

Το ζητούμενο είναι, όπως προαναφέρθηκε, να μπει άμεσα - στατικά στη σελίδα σαν uploader.

 

Κάθε βοήθεια ευπρόσδεκτη! Ό,τι άλλο χρειαστείτε μου λέτε. :-)

XPHSTOS_ Experienced

XPHSTOS_

Δημοσ.
Δημοσ.

Άφού έχεις το html με το Modal... γιατί απλά δεν το βάζεις μόνο του στο template?
Άλλαξε ή βγάλε τις κλάσεις του modal (αυτές το κρύβουν-εμφανίζουν) και βάλε ότι θες εσύ.
Έτσι απλά θα εμφανιστεί με το που φορτώσει η σελίδα...

Πχ.

<div class="container">
            <div class="row">
                <div class="well well-large">
                    <h4 class="title">Upload Files</h4>
                    <div class="uploader-body">
                        <!-- Hidden alert message -->
                        <div class="alert alert-danger upload-max">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            You have exceeded the limit of uploaded images.
                        </div>
                        <div class="" id="fileupload">
                            <!-- Images list -->
                            <ul class="files images ui-sortable"></ul>
                            <br clear="all">

                            <!-- Attachments list -->
                            <ul class="files attachments ui-sortable"></ul>
                            <br clear="all">

                            <div class="loading-files"></div>

                            <div class="fileupload-buttonbar">
                                <!-- Upload files button -->
                                <span class="btn btn-sm btn-success fileinput-button"><i class="glyphicon glyphicon-upload"></i> <span>Upload</span>
                                <input name="files[]" multiple="" type="file">
                                </span>
                                <!-- Webcam snaphots -->
                                <span class="btn btn-sm btn-info webcam-snap"><i class="glyphicon glyphicon-camera"></i> <span>Webcam</span></span>
                                <!-- Delete all files button -->
                                <button type="button" class="btn btn-sm btn-danger delete-all"><i class="glyphicon glyphicon-trash"></i> <span>Delete all</span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  • Like 1
philos Crazy Insomniac

philos

Δημοσ.
  • Μέλος
Δημοσ.

Φαίνεται δουλεύει μια χαρά, σε ευχαριστώ πολύ! Απλά φοβόμουν ότι αν αλλάξω τις κλάσεις αφαιρώντας το "modal" δε θα φαίνεται σωστά (συν ότι δεν ξέρω τα defaults css του bootstrap).

Και άλλη μια ερώτηση για να κλείσουμε: χρησιμοποιώ το bootstrap.css σε μια σελίδα με επιπλέον css.

Αυτό έχει σαν αποτέλεσμα να γίνονται κάποιες συγκρούσεις μεταξύ των στοιχείων των δύο CSS κειμένων. Υπάρχει κάποιο εργαλείο ώστε να εντοπίσω γρήγορα τις συγκρούσεις αυτές και γενικά κάποιος τρόπος να διορθώσω το πρόβλημα; Μιλάμε για αρκετό κείμενο CSS γι' αυτό ψάχνω εύκολο τρόπο να κάνω εντοπισμό. :-)

XPHSTOS_ Experienced

XPHSTOS_

Δημοσ.
Δημοσ.

Τι εννοείς συγκρούσεις?
Ότι το ένα αναιρεί το άλλο? (Overrides?)

Αν ναι, δεν πειράζει, εκτός και αν ψιρίσουμε το performance της υπόθεσης.
Φρόντισε απλά το δικό σου CSS, να φορτώνει τελευταίο.

Δήλαδή στα link tags στο head να φορτώνει πρώτο το bootstrap.css και όποια άλλη default βιβλιοθήκη (lightbox κλπ.) και στο τέλος το δικό σου custom.css
Γενικά το override δεν είναι κακό, μάλιστα συνίσταται για να αποφύγεις προβλήματα με updates στις πρωτότυπες βιβλιοθήκες.
Αν γίνει update στο bootstrap αν είχες κάνει αλλαγές μέσα στο bootstrap.css θα χανόντουσαν, ενώ αν έχεις κάνει αλλαγές (overrides) στο custom.css όσα updates και να γίνουν, η αλλαγή που θέλεις θα μένει σταθερή :)

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...