custom_announcement/app/views/admin/custom_announcements/_approval_modal.html.erb

<style>
    #approvalModal {
        width: 90%;
        height: 600px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
    }
    #approvalModal .preview-iframe {
        border: 0;
        outline: none;
        width: 100%;
        height: 100%;
    }
    #approvalModal .modal-body {
        background-color: #fff;
        padding: 0;
        max-height: none;
        height: 100%;
        overflow: hidden;
    }
    #approvalModal .modal-left {
        overflow: auto;
        float: left;
        width: 19.8%;
        border-right: 1px solid #DFDFDF;
        height: 100%;
        padding: 1em;
        margin: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #approvalModal .modal-right {
        float: right;
        width: 80%;
        height: 100%;
    }
    .approvalModal__form {
        padding: 0 10px;
        margin: 0;
    }
    label.approvalModal__radio {
        display: inline-block;
    }
    label.control-label {
        display: inline-block;
    }

    .approvalModal__controls {
        display: inline-block;
        vertical-align: middle;
    }

    .approvalModal__group {
        display: inline-block;
        vertical-align: middle;
    }

    label.approvalModal__label {
        display: inline-block;
        margin: 0 4px 0 7px;
        position: relative;
        top: -1px;
    }
    .approvalModal__controls .approvalModal__privacy {
        margin: 0 5px;
    }
    .approvalModal__controls .approvalModal__large {
    }
    #approvalModal .modal-footer {
        text-align: left;
        padding: 15px 10px 10px;
    }
    .approvalModal__group.confirm {
        float: right;
    }
</style>
<div id="approvalModal" class="modal hide fade" role="dialog">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>預覽</h3>
  </div>
  <div class="modal-body clearfix">
    <div class="modal-left">
        <label for="____">寄送對象</label>
    </div>
    <div class="modal-right">
        <iframe class="preview-iframe"></iframe>
    </div>
  </div>
  <div class="modal-footer">
      <%= form_tag "/admin/custom_announcement/approve_custom_bulletin", :class=>"approvalModal__form" do %>
        <div class="approvalModal__group">
            <label class="control-label" for="custom_bulletin_approval_stat">審核狀態</label>
            <div class="approvalModal__controls">
                <label class="approvalModal__radio">
                    <input class="approvalModal__privacy" id="custom_bulletin_is_checked_true" name="approved" type="radio" value="true">已認可
                </label>
                <label class="approvalModal__radio">
                    <input checked="checked" class="approvalModal__privacy" id="custom_bulletin_approved_false" name="approved" type="radio" value="false">拒絕
                </label>
            </div>
        </div>
        <div class="approvalModal__group  group--reject">
            <label class="approvalModal__label" for="is_checked_false_拒絕原因">拒絕原因</label>
            <div class="approvalModal__controls">
                <input class="approvalModal__large" id="custom_bulletin_not_checked_reason" name="reason" size="30" type="text">
            </div>
        </div>

        <div class="approvalModal__group confirm">
            <input class="approvalModal__btn btn btn-primary" name="commit" type="submit" value="送出">
            <input type="hidden" id="object_id" name="id" />
            <button class="approvalModal__btn btn" data-dismiss="modal" aria-hidden="true">關閉</button>
        </div>
    <% end %>
  </div>
</div>